jquery的移动菜单问题

Question

在使用 jquery 的 this 选择器时遇到了一些问题，我猜想是这样的子元素。我正在尝试制作一个具有不同元素的移动菜单，每个元素在单击时都会显示一个以块格式显示的子菜单。

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");
});

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

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

Answer 1

这是Demo 为什么你在所有元素 O.o 上使用相同的类，这是一个 SSSOOOOOOOOOOOOOOOOOOOOOOO 糟糕的方法，我将类别类添加到你的类别中以便我可以选择它们

我在 .li-mobile-open 中添加了 !important 以显示和可见性

.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");
});