Question

人，

我有一个问题，我会在解释之前首先粘贴代码。

$(document).ready(function() {
  $a = $('ul li a');
  $b = $('ul ul');
  $a.on("click", function() {
    $b.slideToggle(500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
  <nav>
    <ul>
      <li><a href="#">Artists</a>
      </li>
      <ul>
        <li><a href="">Artists</a>
        </li>
        <li><a href="">Artists</a>
        </li>
        <li><a href="">Artists</a>
        </li>
        <li><a href="">Artists</a>
        </li>
      </ul>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
    </ul>
  </nav>
</div>

我需要li来识别它是否有ul和slideToggle。点击另一个li并ul时，前一个下拉列表会关闭。

我完全不知道我将如何实现这一目标！

提前谢谢！

Answer 1

我做了一些小改动。我需要嵌套内部ul并简化选择器。为了使它更好，您可以删除锚标记，只需单击li即可，因此您不需要遍历父级。

＆＃13;

$(document).ready(function() {
  $link = $('ul li a')

  $link.on("click", function() {
    $(this).parent().find('ul').slideToggle(500);
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
  <nav>
    <ul>
      <li><a href="#">Artists</a>
        <!-- I had to nest the ul inside the li -->
        <ul>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
        </ul>
      </li>
      <li><a href="">Artists</a>
        <ul>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
        </ul>
      </li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
    </ul>
  </nav>
</div>

＆＃13;

Answer 2

你可以这样做。

$('#navigation ul li a').click(function(e) {
  e.preventDefault();
  $('#navigation > nav > ul ul').slideUp();
  $(this).next('ul').slideToggle(500);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
  <nav>
    <ul>
      <li>
        <a href="#">Artists</a>
        <ul style="display:none;">
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
        </ul>
      </li>
      <li>
        <a href="">Artists</a>
        <ul style="display:none;">
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
        </ul>
      </li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
    </ul>
  </nav>
</div>

单击父“li”元素需要打开底层“ul”

2 个答案: