jquery show/hide 下一个 ul
jquery show/hide next ul
我对这个示例中的 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>
试试下面的代码
$('.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>
那是因为 next 只会定位到紧邻的下一个兄弟,在您的例子中是 b 标签。
您需要定位 nextAll ul siblings 中的第一个元素:
$('.dropdown-toggle').on('click', function(event) {
$(this).nextAll('ul:first').hide();
});
如果您想切换 ul 元素,请使用 .toggle()
而不是上面的 .hide()
:
$(this).nextAll('ul:first').toggle();
这应该可以解决问题:http://jsfiddle.net/c8kouunk/2/
$('.dropdown-toggle').on('click', function(event) {
$(this).parents('body').find('ul').hide();
});
我对这个示例中的 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>
试试下面的代码
$('.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>
那是因为 next 只会定位到紧邻的下一个兄弟,在您的例子中是 b 标签。
您需要定位 nextAll ul siblings 中的第一个元素:
$('.dropdown-toggle').on('click', function(event) {
$(this).nextAll('ul:first').hide();
});
如果您想切换 ul 元素,请使用 .toggle()
而不是上面的 .hide()
:
$(this).nextAll('ul:first').toggle();
这应该可以解决问题:http://jsfiddle.net/c8kouunk/2/
$('.dropdown-toggle').on('click', function(event) {
$(this).parents('body').find('ul').hide();
});