我遇到的问题是我构建了这个响应式导航。我只希望它在单击汉堡包图标时下拉,但如果我尝试定位它,它将不起作用。它仅在我定位它嵌套的整个导航栏时才有效。
这是本地 jsFiddle 的链接 here
HTML代码
<div class="toggleMenu">
<button type="button" class="navbar-toggle" id="toggle-btn"></button>
</div>
<nav class="level-nav hidden-md">
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Pulses</a></li>
<li><a href="#">Kudos</a></li>
<li><a href="#">Blogs</a></li>
<li>
<a href="#">Resources <b class="caret"></b></a>
<div class="level-inner">
<span class="split"></span>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</li>
</ul>
</nav>
JQuery 代码
$(document).ready(function(){
var mobileMenu = $(".level-nav li a");
$(mobileMenu).each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
/* Defined variables for main and sub multi-level navigations */
var subNav = $("#toggle-btn");
/* Function that activates the sub-navigation bar to toggle the sibiling which is the .level-nav */
$(subNav).click(function (e){
e.preventDefault();
$(this).siblings(".level-nav").toggle(175, "easeInQuad");
});
});
最佳答案
按钮不是导航的兄弟,它被包装在导航的兄弟DIV中
$(this).closest('.toggleMenu').siblings(".level-nav").toggle(175, "easeInQuad");
要像这样使用 toggle()
,您还必须包含 jQuery UI
关于javascript - JQuery点击功能没有触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24046927/