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

尝试以下代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

或正如milind所说，它只对第二个选项

起作用于下一个ul元素

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

和切换

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是因为接下来只针对下一个兄弟，即你的情况下的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显示/隐藏下一个ul

3 个答案: