我是一个初学者,我正在复制LinkedIn的布局设计作为练习项目。我需要一个在单击按钮时显示或隐藏菜单的功能。
我最初通过复制 W3SCHOOL 上的示例来做到这一点,但后来我尝试将相同的逻辑应用于不同的按钮和 div,但它不起作用。我尝试稍微重写它以处理多个变量,但我自己做不到。
这是代码:
<button class="navbarBTN"onclick="hideshow()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M3 3h4v4H3zm7 4h4V3h-4zm7-4v4h4V3zM3 14h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4zM3 21h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4z"></path>
</svg></button>
<div class="myDIV" class="flex-column bg-light rounded-3" style="position: absolute; width: 180px; font-size: smaller; margin-top: 2.5%;">
<div class="d-flex flex-column">
<ul style="margin: 0; padding: 6px; border-color:#666666; border-bottom: 2px solid;">
<p class="m-0">Costin Velicu</p>
<p class="fw-light">Looking for work</p>
<button type="button" class="btn btn-outline-primary rounded-5" style="width: 100%; height: 30px;"><p style="font-size: smaller;">View profile</p></button>
</ul>
</div>
<script>
function hideshow() {
var x = document.getElementsByClassName("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
这个有效。本质上,在我按下按钮后,div 会将显示模式从块切换到无。
<button class="navbarBTN"onclick="hideshow()">
<div class="d-flex sticky-bottom bg-light" style="width: fit-content; left: 80%; position: relative;">
<i class="fa-solid fa-user-ninja" style="color: #424242; font-size: larger; margin-right: 0.5em; padding: 2px"></i>
<p style="margin-right: 10em;">Messaging</p>
<div class="justify-content-between"><i class="fa-solid fa-ellipsis" style="color: #424242; margin-right: 0.5em;"></i><i class="fa-solid fa-pen-to-square" style="color: #424242; margin-right: 0.5em;"></i><i class="fa-solid fa-angle-up" style="color: #424242; margin-right:
0.5em;"></i></div></div></button>
<div class="myDIV" style="display: flex; flex-direction: column-reverse; position: relative; left: 80%;">
<div class="container d-flex flex-column bg-light-subtle" style="width: 350px; position: absolute;">
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Search..." aria-label="Search">
</form>
<script>
function hideshow() {
var x = document.getElementsByClassName("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
这个不行。
您需要迭代
getElementsByClassName()
返回的集合:
HTML:
<button onclick="showHide()">Show/Hide</button>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
JavaScript:
function showHide() {
// Get a collection of elements with the class "show-hide"
const elements = document.getElementsByClassName("show-hide");
// Iterate over the collection
for (let i = 0; i < elements.length; i++) {
// Set the current element
const current_element = elements[i];
// Check current display of the current element
if (current_element.style.display === "none") {
// If the current element is hidden, display it
current_element.style.display = "block";
} else {
// If the current element is shown, hide it
current_element.style.display = "none";
}
}
}
或者,如果您可以或正在使用 JQuery,则更容易做到:
HTML:
<button class="btn-main" type="button" id="toggle-elements">Show/Hide</button>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
JavaScript 和 JQuery:
// When the hide/show button is clicked
$("#toggle-elements").on("click", () => {
$(".show-hide").toggle();
});