jquery手机菜单问题

jquery的this选择器有一些麻烦，我猜想是这样的孩子的元素。我正在尝试制作具有不同元素的移动菜单，每个元素点击后都会显示一个以块格式显示的子菜单。jquery手机菜单问题

HTML

<ul class="mobile" id="mobile-ul"> 
<li class="mobile">Category 1 
    <ul class="mobile"> 
    <li class="mobile"><a href="/link1.html">LINK 1</a></li> 
    <li class="mobile"><a href="/link2.html">LINK 2</a></li> 
    <li class="mobile"><a href="/link3.html">LINK 3</a></li> 
    </ul> 
</li> 
<li class="mobile">Category 2 
    <ul class="mobile"> 
    <li class="mobile"><a href="/link1.html">LINK 1</a></li> 
    <li class="mobile"><a href="/link2.html">LINK 2</a></li> 
    </ul> 
</li> 
</ul>

CSS

ul.mobile{display: inline-block; cursor: pointer; list-style: none; text-align: center; margin: 0; padding: 0; color: #000000;} 
ul.mobile li.mobile{display: inline-block; width: 100%; margin: 0; padding: 10px 0; background-color: #FFFFFF; position: relative;} 
ul.mobile li.mobile ul.mobile{display: none; visibility: hidden; position: relative;} 
ul.mobile li.mobile ul.mobile li.mobile{display: block; padding: 10px 0; background-color: #FFF0F0; width: 100%; text-align: left;} 
.li-mobile-open{display: block; visibility: visible; background-color: #000000; color: #FF00FF;}

和jQuery的：

$('ul#mobile-ul li').click(function(){ 
$("ul.mobile", this).toggleClass("li-mobile-on"); 
});

我认为这是非常简单和直接的什么，我想在这里做的，但它无论我做什么都似乎失败了。如果我将toggleClass替换为css({"display":"block"})，它实际上会起作用，但当然这不是我想要做的;我想切换类，以便点击时它会显示子菜单，当再次点击它会隐藏它。

希望有人能帮助我，并指出我编码中的错误。

来源

2015-09-26 Bob

你有没有考虑'幻灯片Toggle'？ –

不，我没有，不太熟悉它的用法。我会调查。谢谢。 – Bob

这里是它Demo 为什么您使用的所有元素哦哦，它SSSOOOOOOOOOOOOOOOOOOOOOOO坏方法，我添加类别类的类别相同的类别，这样我可以选择它们

我说！这两个重要在。李 - 移动开

.li-mobile-open 
{ 
    display: block !important; 
    visibility: visible !important; 
    background-color: #000000; 
    color: #FF00FF; 
}

的Javascript显示和可见性的：

$('.category').click(function() 
{ 
    $(this).find("ul.mobile").toggleClass("li-mobile-open"); 
});

来源

2015-09-26 01:47:22 Diptox

谢谢，解决了这个问题。显然我被教导不好的编码习惯！感谢您指出这一点，非常感谢。 – Bob

jquery手机菜单问题

回答

相关问题