让自定义 jQuery 选项卡系统正常工作答案

【问题标题】：Getting a custom jQuery tab system to work correctly让自定义 jQuery 选项卡系统正常工作
【发布时间】：2013-07-28 13:08:46
【问题描述】：

我正在尝试开发一个用于我的 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 中的手风琴菜单，其设置可以让所有菜单都可折叠，但在任何时候都不能超过一个可展开。

【问题讨论】：

标签： javascript jquery user-interface tabs

【解决方案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;
    });
});

【讨论】：

哦，我忘了说我之前试过了。问题是每个都不能再次正确关闭。
BY 没有正确关闭，你的意思是它没有动画吗？我怀疑这是您的 active 课程的问题。
嗯，更重要的是一切正常，但是当我再次单击当前选项卡以将其最小化时，它会向上滑动 - 但立即又弹回。
我明白了。我认为您需要在制作动画之前检查您单击的部分是否具有 active 类。如果是，请跳过slideDown()。
（以及slideDown()上方的那一行）。

【解决方案2】：

$(document).ready(function(){

$("#touch").hide();
$("#speak").hide();

$(".sections > li > a").click(function(){
   var id=$(this).attr("href");
    $(".actions:visible").not(id).slideUp();
    if($(id).is(":visible"))  {      
        $(id).slideUp();}
    else
    {$(id).slideDown(); }

});
});

http://jsfiddle.net/LY7rR/3/

【讨论】：

【解决方案3】：

我用这个 JavaScript 成功找到了答案：

$('#t1').click(function(){
    $('#touch').slideToggle('slow');
});
$('#t2').click(function(){
    $('#speak').slideToggle('slow');
});

Here 是小提琴。

【讨论】：