[英]How to show and hide list items(li) elements inside unordered list(ul) using jquery(preferably)?
HTML文件中的無序列表:
<ul class="navbar-nav ml-auto" id="authorization">
<li class="nav-item" class="authorizationLink">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item" class="authorizationLink">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item dropdown" id="usernameDropdown" style="display: none">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
<button id="someButton">button</button>
and to show the list item with on the click of a button. 我想通過單擊按鈕隱藏帶有的列表項,並顯示帶有的列表項。 到目前為止,我已經嘗試過了:
$( document ).ready(function() {
$("#someButton").click(function() {
$(".authorizationLink").hide();
$("#usernameDropdown").show();
})
}
我已經嘗試了其他幾件事,其中一種解決方案有時可以工作,但大多數時候都無法工作。 有沒有一種方法可以使用jQuery? 也許有一些CSS技巧或其他?
您的邏輯很好,您只是有一些語法錯誤。
將class="nav-item" class="authorizationLink"
更改為class="nav-item authorizationLink"
。 每個元素只能有一個class
屬性。
您在jQuery代碼的末尾缺少)
。
HTML元素只能具有一個class
屬性。 如果有更多類,請將它們組合在同一字符串中,並用空格分隔。 另外,您還需要jQuery $(document).ready()
的后綴。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <ul class="navbar-nav ml-auto" id="authorization"> <li class="nav-item authorizationLink"> <a class="nav-link" href="registration.html">Registration</a> </li> <li class="nav-item authorizationLink"> <a class="nav-link" href="login.html">Login</a> </li> <li class="nav-item dropdown" id="usernameDropdown" style="display: none"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Profile</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Logout</a> </div> </li> </ul> <button id="someButton">button</button> <script> $( document ).ready(function() { $("#someButton").click(function() { $(".authorizationLink").hide(); $("#usernameDropdown").show(); }) }); </script>
在這里,只需更改設置class屬性的方式即可。 代替具有2個類屬性,將值組合到相同的字符串中。
$( document ).ready(function() { $("#someButton").click(function() { $(".authorizationLink").hide(); $("#usernameDropdown").show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="navbar-nav ml-auto" id="authorization"> <li class="nav-item authorizationLink"> <a class="nav-link" href="registration.html">Registration</a> </li> <li class="nav-item authorizationLink"> <a class="nav-link" href="login.html">Login</a> </li> <li class="nav-item dropdown" id="usernameDropdown" style="display: none"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Profile</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Logout</a> </div> </li> </ul> <button id="someButton">button</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.