0

JQueryトグルを使用してスライディングサブメニューを作成しようとしています。私は以下を試しましたが、役に立ちませんでした：

<script> $(".menu li a").click(function(){ var ul = $(this).children("ul"); if (ul.is(":none")) { ul.slideDown(); } else { ul.slideUp(); } }); </script>

そしてまた

<script> $("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); }); </script>

適用されるHTMLコードは次のとおりです。

<div class="menu-brk-products-container">
<ul id="menu-brk-products" class="menu">
  <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
       <ul class="sub-menu">
           <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a>
           </li>
      </ul>
  </li>
4

2 に答える 2

0

クリックバインドは、ドキュメントの読み込み後に実行する必要があります。

$(document).ready(function() {
$("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); });
});

また、このクリックは要素にバインドされており、ulが含まれていないため、何も実行されません。「BatteryPoweredAlarms」を「Smokealarms...」をクリックして切り替えたい場合は、セレクターから削除します（ただし、「Battery PoweredAlarms」もクリックすると消えます。別のセレクターが必要です）。

于 2012-03-01T21:00:26.733 に答える
0

試す：

<div class="menu-brk-products-container">
    <ul id="menu-brk-products" class="menu">
        <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
            <ul class="sub-menu" style="display: none">
                <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
$(document).ready(function() {
    $(".menu li a").click(function(){ 
        var ul = $(this).parent().children("ul"); 

        if (ul.is(":hidden")) { 
            ul.slideDown(); 
        } 
        else { 
            ul.slideUp(); 
        }
    });
});
</script>

最大の問題は、子供たちを得ることでした。「this」は <li> 要素ではなくアンカー タグであるため、一致するものは返されませんでした。また、上下にスライドする必要があるかどうかのテストを ":hidden" に変更しました。

于 2012-03-01T21:11:01.567 に答える