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

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

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

Answer 1

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

我添加了！对.li-mobile-open

中的显示和可见性都很重要

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

移动菜单麻烦与jquery

1 个答案: