时间戳

首页 > 解决方案 > 如何使用jquery（最好）显示和隐藏无序列表（ul）中的列表项（li）元素？

javascript - 如何使用jquery（最好）显示和隐藏无序列表（ul）中的列表项（li）元素？

问题描述

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技巧或其他东西？

标签： javascriptjqueryhtml

解决方案

Your logic is fine, you just have some syntax errors.

  • Change class="nav-item" class="authorizationLink" to class="nav-item authorizationLink". You should only have one class attribute per element.

  • You're missing a ) at the end of your jQuery code.

推荐阅读