文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >JavaScript显示/隐藏div

问JavaScript显示/隐藏div
EN

Stack Overflow用户
提问于 2018-06-06 02:06:32
回答 4查看 343关注 0票数 2

有没有人知道有没有办法在点击div框时隐藏特定的div？

单击该框后，某些应用程序div将隐藏起来。这是第一张图片：

​

在框隐藏后，其他div将在当前div的位置重新对齐，然后移回标准视图。第二张图片：

​

​

代码：

​

代码语言：javascript
复制
<div class="container">
   <div class="row">
      	<div class="col-md-4" style="text-align: center;">
    		<button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button>
    	</div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div>
        </div>
      </div>
      <hr />
      <div class="row">
      	<div class="col-md-4" style="text-align: center;">
    		<div id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
    	</div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
        </div>
      </div>
    <script>
    function projectCollab() {
    	var x = document.getElementById("decisionTreeOneDrive");
    	if (x.style.display === "none") {
        	x.style.display = "block";
    	} else {
        	x.style.display = "none";
    	}
	}
	</script>
</div>

​

忽略后面文本中的JavaScript代码，它似乎根本不能正常工作。

javascript
html
css
twitter-bootstrap
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-06-06 02:16:04

你有带有相似ID的div。试着使用另一个选择器，作为示例数据属性。

代码语言：javascript
复制
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="projects" style="font-size: larger;">Collaborate on Projects</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="files" style="font-size: larger;">Collaborate on Files</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="socially" style="font-size: larger;">Collaborate Socially</div>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="projects" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="files" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="socially" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
                </div>
            </div>
            <script>
            function projectCollab(){
                var divsToCange = document.querySelectorAll('[data-decision]'),
                    attr = this.getAttribute('data-collaborate');

                for(var i=0; i<divsToCange.length; i++){
                    var d = divsToCange[i];

                    if(d.getAttribute('data-decision') == attr){
                        d.style.display = (!d.style.display) ? 'none' : '';
                    }else{
                        d.style.display = '';
                    }
                }

                return false;
            }

            var divButtons = document.querySelectorAll('[data-collaborate]');

            for(var i=0; i<divButtons.length; i++){
                divButtons[i].addEventListener('click', projectCollab);
            }
            </script>
        </div>
    </body>
</html>
票数 0
EN

Stack Overflow用户

发布于 2018-06-06 02:19:24

您可以简单地使用jQuery .toggle()函数在隐藏和显示之间切换，它将自动排列相邻的div。

​

代码语言：javascript
复制
$(document).ready(function() {
  $('#decisionTreeBox').on('click', function() {
    $('#test').toggle('show');
  })
})
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<div class="container">
   <div class="row">
      	<div class="col-md-4" style="text-align: center;">
    		<button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button>
    	</div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div>
        </div>
      </div>
      <hr />
      <div class="row">
      	<div class="col-md-4" style="text-align: center;" id="test">
    		<div id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
    	</div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
        	<div id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
        </div>
      </div>
    

	
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2018-06-06 02:21:48

你想隐藏的元素显示你可以用这个参数调用函数“onclick=( this )”。试试下面这个例子。

代码语言：javascript
复制
<div class="container">
    <div class="row">
           <div class="col-md-4" style="text-align: center;">
             <button onclick="projectCollab(this)"><div class="container">
代码语言：javascript
复制
                  Collaborate on Projects                               Collaborate on Files                               Collaborate Socially

代码语言：javascript
复制
                         OneDrive                               Project                               SharePoint                               Teams                               Planner                               Yammer                          function projectCollab() {         var x = document.getElementById("decisionTreeOneDrive");         if (x.style.display === "none") {             x.style.display = "block";         } else {             x.style.display = "none";         }     }

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50706377

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档