jquery show/hide 下一个 ul

Question

我对这个示例中的 show/hide ul 元素有疑问。我的 jquery 脚本适用于任何元素，除了 ul elemeny

$('.dropdown-toggle').on('click', function(event) {
  $(this).next('ul').hide();
});

<a href="#" class="dropdown-toggle">
  <span class="menu-text"> Link </span>
</a>

<b class="arrow"></b>
<ul class="submenu nav-show" style="display:block">
  <li class="">1</li>
  <li class="">3</li>
  <li class="">4</li>
</ul>

http://jsfiddle.net/c8kouunk/1/

Answer 1

试试下面的代码

$('.dropdown-toggle').on('click', function(event) {
  $(this).siblings('ul').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="dropdown-toggle">
  <span class="menu-text"> Link </span>
</a>

<b class="arrow"></b>
<ul class="submenu nav-show" style="display:block">
  <li class="">1</li>
  <li class="">3</li>
  <li class="">4</li>
</ul>

或者正如 milind 所说，它将仅在下一个 ul 元素上工作，所以第二个选项

$(this).next().next('ul').hide();

并用于切换

$('.dropdown-toggle').on('click', function(event) {
  $(this).siblings('ul').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="dropdown-toggle">
  <span class="menu-text"> Link </span>
</a>

<b class="arrow"></b>
<ul class="submenu nav-show" style="display:block">
  <li class="">1</li>
  <li class="">3</li>
  <li class="">4</li>
</ul>

Answer 2

那是因为 next 只会定位到紧邻的下一个兄弟，在您的例子中是 b 标签。

您需要定位 nextAll ul siblings 中的第一个元素：

$('.dropdown-toggle').on('click', function(event) {
 $(this).nextAll('ul:first').hide();
});

Working Demo

如果您想切换 ul 元素，请使用 .toggle() 而不是上面的 .hide()：

$(this).nextAll('ul:first').toggle();

Demo with toggle effect

Answer 3

这应该可以解决问题：http://jsfiddle.net/c8kouunk/2/

$('.dropdown-toggle').on('click', function(event) {

 $(this).parents('body').find('ul').hide();
});

jquery show/hide 下一个 ul

jquery show/hide next ul

jquery

show-hide

next