0

我想创建一个网上商店，当我单击菜单链接时，我想使用 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>

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

这是我的初步网站的链接

4

2 回答 2

0

尝试这个

$(".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');
});

小提琴演示

希望它会帮助你

于 2013-07-29T11:27:44.153 回答
0

不要将其ID用作点击的选择器：

尝试使用类选择器> 的父子选择器：

$(".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();
});

小提琴

于 2013-07-29T11:30:42.870 回答