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手機菜單問題

回答

相關問題