主页 / 问题 / 553057
Accepted
stackanon
Asked:2020-08-08 17:47:12 +0000 UTC2020-08-08 17:47:12 +0000 UTC

打开一个子菜单，而不是一次打开所有

  • 772

$(document).ready(function() {
    $('.link').click(function(event) {
      $('.list__sublist').slideToggle();
      event.preventDefault();
    });
  });
.list__sublist {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="list__item">
    <a class="link" href="">List #1</a>
    <ul class="list__sublist">
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
    </ul>
  </li>
  <li class="list__item">
    <a class="link" href="">List #2</a>
    <ul class="list__sublist">
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
    </ul>
  </li>
</ul>

我怎样才能让它在你点击.link相应的菜单时打开，而不是一下子打开？

jquery

2 个回答

  1. Best Answer

    从单击的元素中获取下一个元素

    $(document).ready(function() {
    $('.link').click(function(event) {
      $(this).next(".list__sublist").slideToggle();
      event.preventDefault();
    });
  });
    .list__sublist {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="list__item">
    <a class="link" href="">List #1</a>
    <ul class="list__sublist">
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
    </ul>
  </li>
  <li class="list__item">
    <a class="link" href="">List #2</a>
    <ul class="list__sublist">
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
    </ul>
  </li>
</ul>

    或者如果标记可以更改，则搜索元素：

    $(document).ready(function() {
    $('.link').click(function(event) {
      $(this.parentNode).find(".list__sublist").slideToggle();
      event.preventDefault();
    });
  });
    .list__sublist {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="list__item">
    <a class="link" href="">List #1</a>
    <ul class="list__sublist">
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
      <li class="list__item"><a href="">Item list #1</a>
      </li>
    </ul>
  </li>
  <li class="list__item">
    <a class="link" href="">List #2</a>
    <ul class="list__sublist">
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
      <li class="list__item"><a href="">Item list #2</a>
      </li>
    </ul>
  </li>
</ul>

    • 0 
  2. $(this).children('.list__sublist').slideToggle();
    • 0

相关问题