Question

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

Answer 1

您的逻辑很好，您只是有一些语法错误。

将class="nav-item" class="authorizationLink"更改为class="nav-item authorizationLink"。 每个元素只能有一个class属性。
您在jQuery代码末尾缺少)。

Answer 2

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>

Answer 3

在这里，只需更改设置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>

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

3 个答案: