javascript - 让自定义 jQuery 选项卡系统正常工作

Question

我正在尝试开发一个用于我的 Web 应用程序的选项卡系统。我了解使用选项卡的基础知识，并且之前已经设法获得了可用的选项卡系统。

然而，这一次，我需要它稍微减少一些常规工作。首先，所有选项卡内容都是隐藏的。当我点击一个选项卡时，我希望选项卡的内容向下滑动。然后，如果我再次单击同一个选项卡，我希望它向上滑动(从而再次隐藏所有内容)。但是，如果我单击不同的选项卡，我想淡入该选项卡的内容。

这是它的一般外观:

这是我的标签的 HTML:

<div class="controls">
    <ol class="sections">
        <li><a href="#touch"><img src="assets/img/touch.png" alt="Touch"> Touch</a></li>
        <li><a href="#speak"><img src="assets/img/speak.png" alt="Speak"> Speak</a></li>
    </ol>
    <ol class="actions" id="touch">
        <li><a href="#">Search for what hatched</a></li>
        <li><a href="#">Pick up the eggshell</a></li>
    </ol>
    <ol class="actions" id="speak">
        <li><a href="#">Call for what hatched</a></li>
        <li><a href="#">Pick up the eggshell</a></li>
    </ol>
</div>

出于样式原因，HTML 以这种方式布局，因此如果可能的话，我宁愿不更改它。 “部分”有序列表用于选项卡，每个“操作”是该选项卡的选项卡内容。

这是我的 JavaScript(不起作用):

$(document).ready(function(){
    $(".sections > li > a").click(function(){
        $("ol.actions").hide();
        if($(this).parent().hasClass("active")) {
            $($(this).attr('href')).hide();
            $(this).parent().removeClass("active");
        } else {
            $($(this).attr('href')).show();
            $(this).parent().addClass("active");
        }
        return false;
    });
});

我也试过这个:

$(document).ready(function(){
    $(".sections li a").click(function(){
        var target = $(this).attr('href');
        var parent = $(this).parent();

        var sections = $("ol.sections li");
        var actions = $("ol.actions");

        $(sections).removeClass("active");
        $(actions).slideUp();

        $(parent).addClass("active");
        $(target).slideDown();

        return false;
    });
});

谁能帮我找出正确的代码？ 类似系统的一个例子是 jQuery UI 中的 Accordion 菜单，其设置使所有菜单都可折叠，但在任何时候都不会超过一个可展开。

Answer 1

我之前构建过类似的东西。您想使用 .slideUp() 和 .slideDown() jQuery 方法。

编辑:

(再次)尝试这个。 (我做了一些细微的修改。它之前肯定是坏的。)

$(document).ready(function(){
    $(".sections li a").click(function(){
        var target = $(this).attr('href');
        var $parent = $(this).parent();

        var $sections = $("ol.sections li");
        var $actions = $("ol.actions");

        if( !$parent.hasClass('active') ){
            $sections.removeClass("active");
            $actions.slideUp();

            $parent.addClass("active");
            $(target).slideDown();
        } else {
            $sections.removeClass("active");
            $actions.slideUp();
        }

        return false;
    });
});