jquery - 最小限のドロップダウン メニュー トリガー個々の子

Question

最小限の JS と CSS を使用して、シンプルなドロップダウン メニューを作成しようとしています。

完全に機能しますが、ホバーした要素ではなく、すべての子要素を一度にトリガーします。

<nav id="product-index">
        <ul class="product-list">
            <li class="prod-trig">Bikes</li>
                <li><ul class="product-sub">
                <p>Bike product sub</p>
                </ul></li>

            <li class="prod-trig">Parts &amp; Tools</li>
                <li><ul class="product-sub">
                <p>Bike product sub</p>
                </ul></li>

            <li class="prod-trig">Clothes &amp; Shoes</li>
                <li><ul class="product-sub">
                <p>Bike product sub</p>
                </ul></li>

            <li class="prod-trig">Protection</li>
                <li><ul class="product-sub">
                <p>Bike product sub</p>
                </ul></li>

            <li class="prod-trig">More</li>
                <li><ul class="product-sub">
                <p>Bike product sub</p>
                </ul></li>
        </ul>
</nav>

$(document).ready(function() {
    $('.prod-trig').hover(function() {
        $('.product-sub').stop().slideDown(400);
    }, function() {
        $('.product-sub').stop().slideUp(400);
    });
});

これがフィドルです。http://jsfiddle.net/npLwX/55/

Answer 1

代わりにこれを試してください：

$('.prod-trig').hover(function() {
    $(this).next().find('.product-sub').stop().slideDown(400);
}, function() {
    $(this).next().find('.product-sub').stop().slideUp(400);
});​

jsFiddle の例

クラス全体ではなく、特定の要素をターゲットにする必要があります。