单击新按钮时如何关闭所有其他div？
Posted
技术标签:
【中文标题】单击新按钮时如何关闭所有其他div？【英文标题】：How to close all other divs when a new button is clicked? 【发布时间】：2019-09-12 00:16:52 【问题描述】：我有一个包含 5 个按钮的按钮组。我想要按钮的 onclick 事件来切换 5 个不同的 div。单击按钮 1 打开/关闭 div 1，单击按钮 2 打开/关闭 div 2，依此类推。 div 在这里只是文本。
第一次点击按钮 --> 显示 div 第二次点击按钮 --> 隐藏 div
但是，当我只单击一个按钮并显示它的 div 并单击另一个按钮时，另一个 div 堆叠在第一个 div 之上。如果我单击它的按钮两次，我可以关闭第一个 div，但我希望即使单击不同的按钮也能关闭 div。我怎样才能做到这一点？
到目前为止，我已经附加了 jsfiddle。
我多次看到类似的问题，但似乎没有一个解决方案适合我。任何帮助将不胜感激。
function togglediv(id)
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
<div class="myButtons">
<div class="btn-group" id="MatchingEntitiesButtons">
<button id="Button1" class="roundBtns" onclick="togglediv('NamesTable')" type="button" > List of Names </button>
<button id="Button2" class="roundBtns" onclick="togglediv('PhoneTable')" type="button"> List of Address </button>
<button id="Button3" class="roundBtns" onclick="togglediv('AddressTable')" type="button" > List of Phone#</button>
<button id="Button4" class="roundBtns" onclick="togglediv('GradesTable')" type="button"> List of Grades</button>
<button id="Button5" class="roundBtns" onclick="togglediv('SchoolTable')" type="button"> List of Schools </button>
</div>
</div>
<div id ="NamesTable" class="TableBody" style="display:none">Names </div>
<div id ="PhoneTable" class="TableBody" style="display:none">Address </div>
<div id ="AddressTable" class="TableBody" style="display:none">Phone# </div>
<div id ="GradesTable" class="TableBody" style="display:none">Grades </div>
<div id ="SchoolTable" class="TableBody" style="display:none">School </div>【问题讨论】：
使用类会容易很多。 How to close multiple divs independed from each other. javascript的可能重复 【参考方案1】：使用类会使这变得容易得多。您可以选择具有活动类的元素并将其删除。
function togglediv(id)
var div = document.getElementById(id);
document.querySelectorAll(".TableBody.active").forEach(function(elem)
if (elem !== div) elem.classList.remove("active");
);
// toggle the class to the section that was clicked.
div.classList.toggle("active");
.TableBody
display: none;
.TableBody.active
display: block;
<div class="myButtons">
<div class="btn-group" id="MatchingEntitiesButtons">
<button id="Button1" class="roundBtns" onclick="togglediv('NamesTable')" type="button"> List of Names </button>
<button id="Button2" class="roundBtns" onclick="togglediv('PhoneTable')" type="button"> List of Address </button>
<button id="Button3" class="roundBtns" onclick="togglediv('AddressTable')" type="button"> List of Phone#</button>
<button id="Button4" class="roundBtns" onclick="togglediv('GradesTable')" type="button"> List of Grades</button>
<button id="Button5" class="roundBtns" onclick="togglediv('SchoolTable')" type="button"> List of Schools </button>
</div>
</div>
<div id="NamesTable" class="TableBody">Names </div>
<div id="PhoneTable" class="TableBody">Address </div>
<div id="AddressTable" class="TableBody">Phone# </div>
<div id="GradesTable" class="TableBody">Grades </div>
<div id="SchoolTable" class="TableBody">School </div>不使用类，你可以只使用循环并将其设置为隐藏
document.querySelectorAll(".TableBody")
.forEach(function (elem)
elem.style.display = "none";
)
此代码不会切换。如果您需要切换，只需检查元素是否是您当前拥有的元素。
var active = doucument.getElementById(id);
document.querySelectorAll(".TableBody")
.forEach(function (elem)
if (elem !== active)
elem.style.display = "none";
)
【讨论】：
如果您再次单击该项目，您的解决方案不会关闭它。 @CodeBreaker 是不是点了两次DIV就不该隐藏了？ 所以他们调用toggle并使用与上一个示例相同的想法 上述代码有效，但就像@Barmar 所说，当我单击它两次时它并没有隐藏 div。不过非常感谢。我明白我错过了什么。 编辑它来切换....移动一行代码，切换添加到切换，并添加一个if检查。，【参考方案2】：循环遍历所有 DIV。如果是指定的DIV，则切换，否则隐藏。
function togglediv(id)
document.querySelectorAll(".TableBody").forEach(function(div)
if (div.id == id)
// Toggle specified DIV
div.style.display = div.style.display == "none" ? "block" : "none";
else
// Hide other DIVs
div.style.display = "none";
);
<div class="myButtons">
<div class="btn-group" id="MatchingEntitiesButtons">
<button id="Button1" class="roundBtns" onclick="togglediv('NamesTable')" type="button"> List of Names </button>
<button id="Button2" class="roundBtns" onclick="togglediv('PhoneTable')" type="button"> List of Address </button>
<button id="Button3" class="roundBtns" onclick="togglediv('AddressTable')" type="button"> List of Phone#</button>
<button id="Button4" class="roundBtns" onclick="togglediv('GradesTable')" type="button"> List of Grades</button>
<button id="Button5" class="roundBtns" onclick="togglediv('SchoolTable')" type="button"> List of Schools </button>
</div>
</div>
<div id="NamesTable" class="TableBody" style="display:none">Names </div>
<div id="PhoneTable" class="TableBody" style="display:none">Address </div>
<div id="AddressTable" class="TableBody" style="display:none">Phone# </div>
<div id="GradesTable" class="TableBody" style="display:none">Grades </div>
<div id="SchoolTable" class="TableBody" style="display:none">School </div>【讨论】：
【参考方案3】：当点击任何按钮时隐藏所有div 元素，然后只显示需要显示的元素。
但是，稍微改变一下你的方法：
不要使用内联 html 事件属性，例如onclick。有
a bunch of reasons 不要使用这个 25 岁以上的技术
不会死。
使用Event Delegation 可以设置单个事件处理程序，但是
根据点击了哪个特定按钮做出反应。
摆脱ids。使用ids 会使你的代码变得脆弱，因为你
需要不断更新代码以适应新元素。
不要使用内联样式 - - 改用 CSS 类。这消除了
冗余代码，更容易覆盖应用的样式。
var clickedBtnIndex = null;
var shownDiv = null;
// Get all the buttons and divs into Arrays:
let buttons = Array.prototype.slice.call(document.querySelectorAll(".roundBtns"));
let divs = Array.prototype.slice.call(document.querySelectorAll(".TableBody"));
// Set up a single click event handler on the parent element of the buttons
document.querySelector(".btn-group").addEventListener("click", function(evt)
// evt.target is a reference to the specific button that triggered the event
clickedBtnIndex = buttons.indexOf(evt.target); // Get the index of the clicked button within its group
// If a button was clicked
if(evt.target.classList.contains("roundBtns"))
// Loop over the divs
divs.forEach(function(div)
// Check to see if it is currently being shown
if(!div.classList.contains("hidden"))
shownDiv = div;
);
hideAll(); // Hide all the divs
// Show/hide just the one that was clicked
if(divs[clickedBtnIndex] === shownDiv)
divs[clickedBtnIndex].classList.add("hidden");
shownDiv = null;
else
divs[clickedBtnIndex].classList.remove("hidden");
// Store a reference to the index of the button within its group that was clicked
clickedBtnIndex = buttons.indexOf(evt.target);
);
// This will hide all the divs
function hideAll()
// Loop over the array
divs.forEach(function(div)
div.classList.add("hidden"); // Add the hidden class
);
.hidden display:none; <div class="myButtons">
<div class="btn-group" id="MatchingEntitiesButtons">
<button class="roundBtns" type="button">List of Names</button>
<button class="roundBtns" type="button">List of Address</button>
<button class="roundBtns" type="button">List of Phone#</button>
<button class="roundBtns" type="button">List of Grades</button>
<button class="roundBtns" type="button">List of Schools</button>
</div>
</div>
<div class="TableBody hidden">Names</div>
<div class="TableBody hidden">Address</div>
<div class="TableBody hidden">Phone#</div>
<div class="TableBody hidden">Grades</div>
<div class="TableBody hidden">School</div>但要真正让这变得更简单，请去掉要显示或隐藏的单独 div，只使用一个 div 作为占位符。然后，只需更改该单个 div 的内容即可。
// Store the data that will need to be displayed in an object that
// has properties that store the arrays of actual data
var data =
names: ["Scott","Mary","Tom"],
addresses: ["10 Main", "23 Elm", "43 Standish"],
phoneNums: ["555-555-5555","123-456-7890"],
grades: ["C", "B-", "A+"],
schools: ["District 1", "District 2", "District 3"]
;
// These map to the object properties and will be used to extract the right data
var keyNames = ["names", "addresses", "phoneNums", "grades", "schools"];
var output = document.querySelector(".output"); // The output element
// Get all the buttons and divs into Arrays:
let buttons = Array.prototype.slice.call(document.querySelectorAll(".roundBtns"));
// Set up a single click event handler on the parent element of the buttons
document.querySelector(".btn-group").addEventListener("click", function(evt)
// Get the index of the button that was clicked within its group
var clickedIndex = buttons.indexOf(evt.target);
// Inject the string into the output div
output.innerHTML = data[keyNames[clickedIndex]].join("<br>");;
);<div class="myButtons">
<div class="btn-group" id="MatchingEntitiesButtons">
<button class="roundBtns" type="button">List of Names</button>
<button class="roundBtns" type="button">List of Address</button>
<button class="roundBtns" type="button">List of Phone#</button>
<button class="roundBtns" type="button">List of Grades</button>
<button class="roundBtns" type="button">List of Schools</button>
</div>
</div>
<div class="output"></div>并且，为了真正降低复杂性，不要为每个被点击的按钮单独设置div。只需一个div，然后根据点击的按钮更改其中的内容：
【讨论】：
以上是关于单击新按钮时如何关闭所有其他div？的主要内容，如果未能解决你的问题，请参考以下文章