JavaScript显示/隐藏div
有人知道在点击div框时是否有办法让某些div隐藏？
单击该框后，某些应用程序div将隐藏。这是第一张图片：
当盒子隐藏时，另一个div将在当前div的位置重新排列，然后移回标准视图。 第二张图片：
代码：
<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代码，它似乎根本无法正常工作。
5 个答案:
答案 0 :(得分：1)
你有div与similair ID。尝试使用其他选择器，作为示例数据属性。
<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>
答案 1 :(得分：0)
你可以简单地使用jQuery .toggle()函数在hide和show之间切换，它会自动排列相邻的div。
$(document).ready(function() {
$('#decisionTreeBox').on('click', function() {
$('#test').toggle('show');
})
})<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>
答案 2 :(得分：0)
您要隐藏的元素显示您可以使用此参数调用函数onclick =“function（this）”。 试试下面给出的例子。
<div class="container">
<div class="row">
<div class="col-md-4" style="text-align: center;">
<button onclick="projectCollab(this)"><div class="container">
在项目上合作 协作处理文件 在社交场合合作
<小时/> 一个驱动器 项目 的SharePoint 小组 规划人员 Yammer的 function projectCollab（）{ var x = document.getElementById（“decisionTreeOneDrive”）; if（x.style.display ===“none”）{ x.style.display =“block”; } else { x.style.display =“none”; } }
答案 3 :(得分：0)
HTML只是你的副本，但如果你更喜欢使用js而不是jquery，下面的JS函数可以帮助你。
<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").setAttribute("onclick", hide());
}
function hide(){
var sharepoint = document.getElementById("decisionTreeSharePoint");
var planner = document.getElementById("decisionTreePlanner");
if (sharepoint.style.display === "none") {
sharepoint.style.display = "block";
} else {
sharepoint.style.display = "none";
}
if (planner.style.display === "none") {
planner.style.display = "block";
} else {
planner.style.display = "none";
}
}
</script>
</div>
答案 4 :(得分：0)
我认为您遇到了两个问题。
- 您想要切换下面的方块。
- 您希望这些框在剩余的空间中折叠。
- 在每个按钮上创建onClick切换功能：
onclick=toggleSquares('DESTINATION'); - 将目标添加到要切换的CSS列元素（解决＃2）：
data-toggle="files" - 在CSS列元素上添加CSS类钩子（可选）。
- 点击抓取所有包含＆＃39; .square＆＃39;将它们添加到函数本地的变量中。
- 遍历该变量对象，并将它们与通过函数传递的
type进行比较 - 如果元素与传递的类型不匹配 - 添加一个带有＆＃39; display：none＆＃39;的css类。属性。
- 如果元素与传递的类型匹配 - 删除css类（如果已在步骤3中添加）。
要解决问题＃1 - 我创建了一个不依赖于任何框架的香草javascript切换。
这需要对HTML进行三次更新
<button onclick=toggleSquares('projects')>
<div id="decisionTreeBox">Collaborate on Projects</div>
</button>
...
<div class="col-md-4 square" data-toggle="projects">
<div>
<h3 id="innerBoxHeadings">OneDrive</h3>
</div>
</div>
`
javascript函数看起来像这样：
function toggleSquares(type){
var getSquares = document.querySelectorAll(".square");
getSquares.forEach(function(element){
if(element.getAttribute('data-toggle') != type) {
element.classList.add('display-none');
}
else {
element.classList.remove('display-none');
}
})
}
逐步完成互动：
这是一个概述上述互动的编写工具：https://codepen.io/MathiasaurusRex/pen/aKZbqR
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？