Выпадающее меню выпадающего меню (часть 2)

Question

Я сделал тему об этом в этом link.

Я объясняю все в этой теме.

Я смотрю вокруг в stackoverflow, пытаясь найти идеи этого, и я вроде как сделал.

Я играл с кодом и 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 делает работу, но при дублировании их с тем же идентификатором называется sort-list-menu-dropdown, и когда вы нажмете первый текст под названием «4», он откроет меню под названием sort-list. Но это то, где он запутывается. Когда вы дублируете это, тогда, когда вы нажимаете первый текст меню, называемый «4», он будет его поднимать, но когда вы нажимаете на второе меню, первое меню не скрывается.

Если кто-нибудь знает, как достичь этого, это будет полезно для меня.

Answer 1

Попробуйте добавить $("ul.sort-list").hide(); Это скроет все элементы, соответствующие ul.sort-list, но ваша следующая строка переключит ту, на которую была нажата кнопка, и отобразите ее.

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

Answer 2

Во-первых, вам нужно изменить .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

Answer 3

Это, вероятно, субпродукт копирования/вставки кода, но убедитесь, что вы закрываете свой div. Но вам, вероятно, не нужен этот div.

Как Феликс указал, что вам нужно по умолчанию сортировка-меню в отличие от .sort меню

И, наконец, переключив класс должен работать только штраф за то, что вы хотите сделать.

См http://jsfiddle.net/thechrisjordan/sx73T/1/

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