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

Question

我想展示一个水平项目列表，每个项目都通过一个“ id”连接到一个独立的div。 我希望连接到该项目的div切换到渐变。 默认为隐藏所有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的了解不多，对您的帮助或指导将不胜感激！

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

工作提琴 。