Проблемы, связанные с созданием боковой панели переключения выпадающего меню

Question

Я работаю над http://www.variied.com/market/men/. Я пытаюсь создать раскрывающееся меню переключения на боковой панели, которое запускается, когда кто-то нажимает ссылку «Топы» на боковой панели, которая затем переключает содержимое в подменю, которое будет отображаться. Вот мой текущий код

<style> 
ul.category ul.sub-menu ul.sub-menu li a{ 
display:none 
} 
</style> 
<script> 
jQuery(document).ready(function() { 
    jQuery("#menu-item-746").click(function() { 
     jQuery(this).next("ul.category ul.sub-menu ul.sub-menu li a").toggle(); 
     return false; 
    }); 
}); 
</script> 

Answer 1

Есть несколько вопросов в этой скрипке:

1. У вас есть класс с именем #submenu это должно быть просто submenu
2. Вы прохождение event так что вы можете использовать e.preventDefault() (если вы предпочитаете return false)
3. Я бы предложил установить subnav ul на display: none и просто переключить его, и я бы использовал slideToggle для лучшего эффекта.

JS

$("#menu-item-746").click(function(e) { 
    e.preventDefault(); 
    $(this).next("ul").slideToggle(); 
}); 

HTML

<ul class="submenu"> 
    <li id="menu-item-746"><a href="#">Test Item</a></li> 
    <ul> 
     <li><a href="#">Test1</a></li> 
     <li><a href="#">Test2</a></li> 
    </ul> 
</ul> 

CSS

.submenu ul{ 
    display: none; 
} 

FIDDLE

UPDATE

Я посмотрел на свой HTML на вашем сайте, и кажется, что ваш ul subnav ребенок вашего li не родного брата (это был родной брат в вашей скрипке). Попробуйте это:

$(this).find("ul").slideToggle(); 

Кроме того, из кода, который вы предоставили вы ориентируетесь в id, что означает, что это будет работать только для того, что 1 элемент. Оказывается, те, с subnav имеют класс под названием .menu-item-has-children, так что я бы предназначаться, что, например, так:

$(".sub-menu .menu-item-has-children").click(function(e) { 
    e.preventDefault(); 
    $(this).find("ul.sub-menu").slideToggle(); 
}); 

NEW UPDATE

Target a вместо затем:

$(".sub-menu .menu-item-has-children").on("click", " a:first", function(e) { 
    e.preventDefault(); 
    $(this).siblings("ul.sub-menu").slideToggle(); 
});