Question

我想呈现一个水平的项目列表，每个项目通过'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>

我有以下jQuery代码有效地toggleFade divs，但所有这些，我试图使用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没有太多熟练程度，我们将非常感谢任何帮助或指导！

Answer 1

工作解决方案：http://jsfiddle.net/9Cxx2/

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

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

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

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

    });
});

Answer 2

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

工作fiddle。

通过单击列表项来jQuery切换独立div

2 个答案: