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 に答える