尝试在JQuery中创建滑动切换子菜单
我正在尝试使用JQuery切换创建一个滑动子菜单。我尝试了以下方法,但没有效果:尝试在JQuery中创建滑动切换子菜单,jquery,menu,slidetoggle,sliding,Jquery,Menu,Slidetoggle,Sliding,我正在尝试使用JQuery切换创建一个滑动子菜单。我尝试了以下方法,但没有效果: $(“.menu li a”)。单击(函数(){ var ul=$(this.children(“ul”); 如果(保险商实验室为(“:无”)){ ul.滑下(); }否则{ ul.slideUp(); } }); 而且 $(“ul li.menu-item a”)。单击(函数(){ $(this.children(“ul”).toggle(); }); 它适用于的HTML代码是: <div clas
$(“.menu li a”)。单击(函数(){
var ul=$(this.children(“ul”);
如果(保险商实验室为(“:无”)){
ul.滑下();
}否则{
ul.slideUp();
}
});
而且
$(“ul li.menu-item a”)。单击(函数(){
$(this.children(“ul”).toggle();
});
它适用于的HTML代码是:
<div class="menu-brk-products-container">
<ul id="menu-brk-products" class="menu">
<li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
<ul class="sub-menu">
<li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a>
</li>
</ul>
</li>
文件加载后必须进行点击绑定:
$(document).ready(function() {
$("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); });
});
此外,此单击绑定到a元素,因为它不包含任何ul,所以不会执行任何操作。
如果要使“电池供电报警”切换到“烟雾报警…”,请单击,然后从选择器中删除一个(但单击也会使“电池供电报警”消失,您需要不同的选择器)。尝试:
<div class="menu-brk-products-container">
<ul id="menu-brk-products" class="menu">
<li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
<ul class="sub-menu" style="display: none">
<li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$(".menu li a").click(function(){
var ul = $(this).parent().children("ul");
if (ul.is(":hidden")) {
ul.slideDown();
}
else {
ul.slideUp();
}
});
});
</script>
$(文档).ready(函数(){
$(“.menu li a”)。单击(函数(){
var ul=$(this.parent().children(“ul”);
如果(ul.is(“:hidden”){
ul.滑下();
}
否则{
ul.slideUp();
}
});
});
最大的问题是得到孩子。“this”是锚定标记,而不是