在單擊下拉導航菜單（部分2）

我已經解釋了該主題中的所有內容。

我環顧四周的計算器，試圖找到這種想法和我有點做到了。

我打了周圍的一些代碼和JavaScript我發現。

HTML：

<div class="sort-list-menu-dropdown"> 
<span class="list-sort-title">Columns:</span> 
<ul class="list-menu"> 
    <li class="default-sort-menu"> 
     4 
     <ul class="sort-list"> 
      <li>4</li> 
      <li>8</li> 
     </ul> 
    </li> 
</ul>

CSS：

ul.sort-list { display: none; }

JS：

$("ul.list-menu > li.sort-menu").click(function() { 
    $(this).find("ul").toggle(); 
});

JavaScript的不工作，但是當你複製它們使用相同的ID叫sort-list-menu-dropdown，當你點擊名爲「4」的第一個文本時，它會調出名爲sort-list的菜單但是這是它混亂的地方。當你複製這個時，當你點擊名爲「4」的第一個菜單文本時，它會顯示它，但是當你點擊第二個菜單時，第一個菜單不會隱藏。

如果有人知道如何實現這一目標，這將是對我很有幫助。

來源

2014-01-23 user3184347

嘗試增加$("ul.sort-list").hide();這將隱藏所有匹配的ul.sort列表中的元素，但你的下一行，將觸發被點擊的一個，並顯示它。

$("ul.list-menu > li.sort-menu").click(function() { 
    $("ul.sort-list").hide(); 
    $(this).find("ul").toggle(); 
});

來源

2014-01-23 02:40:02 CRABOLO

這項工作，但是當您單擊菜單，然後點擊頁面時，它會隱藏它，當你點擊即可。 – user3184347

Nvm我明白了。感謝您的幫助。 – user3184347

首先，您需要更改.sort-menu到.default-sort-menu因爲它是正確的類名。

其次，一個列表項單擊以顯示子菜單屬於該ul.sort-list的時候，你可以隱藏其他ul.sort-list

$("ul.list-menu > li.default-sort-menu").click(function() { 
    $("ul.sort-list").hide(); 
    $(this).find("ul").toggle(); 
});

Fiddle Demo

來源

2014-01-23 02:40:49 Felix

其他子這也可能是複製/粘貼的副產品代碼，但確保你正在關閉你的div。但你可能並不需要那個div。

正如菲利克斯指出的那樣，你需要默認排序菜單，而不是的.sort菜單

最後，撥動類應該只是罰款你想要做什麼。

見http://jsfiddle.net/thechrisjordan/sx73T/1/

$('ul.list-menu > li.default-sort-menu').click(function() { 
    $(this).find('ul').toggleClass('sort-list'); 
});

來源

2014-01-23 03:10:24 chrisjordanme

在單擊下拉導航菜單（部分2）

回答

相關問題