Question

我想创建一个网上商店，当我点击一个菜单链接时，我想用jquery显示子菜单。我做了以下代码：

$("#product_list li a").click(function(e){
  e.preventDefault();
  var sub_menu = $(this).next('.sub-menu');
  $('.sub-menu:visible').not(sub_menu).slideToggle('fast');
  sub_menu.slideToggle('fast');
});

这是我想要显示/隐藏的菜单：

 <ul id="product_list">
            <li class="product_list_item"><a href="#" class="product_list_item_link">Tábla PC</a> 
                <ul class="sub-menu">
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Táblák</a></li>
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Kiegészítők</a></li>
                </ul>
            </li>

            <li class="product_list_item"><a href="#" id="notebook" class="product_list_item_link">Notebook</a>
                <ul class="sub-menu">
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Notebook</a></li>
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Netbook</a></li>
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Ultrabook</a></li>
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Táska</a></li>
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Töltő</a></li>
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Dokkoló</a></li>
                    <li class="sub_product_list_item"><a href="tablet.html" class="sub_product_list_item_link">Akkumulátor</a></li>
                </ul>
            </li>
 </ul>

我检查了很多论坛，它应该可以正常工作，但它不起作用....有谁知道为什么不工作？

以下是我preliminary website

的链接

Answer 1

试试这个

$(".product_list_item a").click(function(e){  
var sub_menu = $(this).next('.sub-menu');
$('.sub-menu:visible').not(sub_menu).slideToggle('fast');
sub_menu.slideToggle('fast');
});

FIDDLE Demo

希望它会帮助你

Answer 2

请勿将ID用作点击选择器：

尝试> parent-child选择器和类选择器：

$(".product_list_item > a").click(function(e){
       e.preventDefault();
       var sub_menu = $(this).next('.sub-menu');
       $('.sub-menu:visible').not(sub_menu).slideToggle('fast');
       sub_menu.slideToggle('fast');
});

或试试这个

$(".product_list_item a").click(function(e){
    if(e.target.id != ""){
       var sub_menu = $(this).next('.sub-menu');
       $('.sub-menu:visible').not(sub_menu).slideToggle('fast');
       sub_menu.slideToggle('fast');
    }
    else
       e.preventDefault();
});

Fiddle

SlideToggle在菜单中不起作用

2 个答案: