0

それぞれが「id」を介して独立したdivに接続する、アイテムの水平リストを表示したいと思います。アイテムに接続されたdivをtoggleFadeにしたい。デフォルトでは、すべての div が非表示になります。その後、ユーザーが別のアイテムをクリックすると、以前に開いていた div が閉じます。

html は次のとおりです。

<div id="menu">
        <ul>
            <li><a class="menuitem" href="#smPlates">Small Plates</a></li>
            <li><a class="menuitem" href="#salads">Salads</a></li>
            <li><a class="menuitem" href="#burgers">Burgers</a></li>
            <li><a class="menuitem" href="#desserts">Desserts</a></li>
        </ul>

        <!-- Small Plates menu -->
        <div class="menubox" id="smPlates">
            <p>Content of smPlates</p>
        </div>

        <!-- Salads menu -->
        <div class="menubox" id="salads">
               <p>Content of salads</p>
        </div>

        <!-- Burgers menu -->
        <div class="menubox" id="burgers">
               <p>Content of burgers</p>
        </div>

        <!-- Desserts menu -->
        <div class="menubox" id="desserts">
                <p>Content of desserts</p>
        </div>
</div>

効果的にdivをトグルフェードする次のjQueryコードがありますが、それらはすべて、 attr('id') を使用して各リスト項目に対応するdivを取得しようとしましたが、機能しませんでした:

$(document).ready(function() {
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();
        var menubox = $(".menubox");
        $(".menubox").not(menubox).hide()
        menubox.fadeToggle("slow","linear"); 
    });
});

私は jQuery にあまり習熟していません。ヘルプやガイダンスをいただければ幸いです。

4

2 に答える 2

1

実用的なソリューション: http://jsfiddle.net/9Cxx2/

$(document).ready(function() {
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();

        $('.menubox').hide();

        $($(this).attr('href')).fadeToggle("slow","linear");;

    });
});​
于 2012-12-28T00:02:56.847 に答える
0 
$(document).ready(function() {

    // Hide all menuboxes initially
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();

        // Hide the menubox that is allready opened
        $(".menubox").hide();

        // Get the new menubox from the href attribute of menuitem
        var relatedDivID = $(this).attr('href');

        // Fade new menubox
        $(relatedDivID).fadeToggle("slow","linear"); 
    });
});

ワーキングフィドル。

于 2012-12-28T00:04:49.480 に答える