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>
我想使用 class="authorizationLink" 隐藏列表项,并在单击按钮时使用 id="navbarDropdown" 显示列表项。到目前为止我已经尝试过:
$( document ).ready(function() {
$("#someButton").click(function() {
$(".authorizationLink").hide();
$("#usernameDropdown").show();
})
}
我尝试了更多的方法,其中一种解决方案有时有效,但大多数时候不起作用。有没有办法使用 jquery 来实现这一点?也许有一些 css 技巧或其他东西?
最佳答案
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>
关于javascript - 如何使用jquery(最好)显示和隐藏无序列表(ul)中的列表项(li)元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51864650/