Question

我正在尝试开发一个标签系统，以便在我的网络应用程序中使用。我理解使用标签的基本原理，并且之前设法获得了工作标签系统。

然而，这一次，我需要它在传统上稍微减少工作。首先，隐藏所有选项卡内容。当我单击选项卡时，我希望选项卡的内容向下滑动。然后，如果我再次点击同一个标签，我希望它向上滑动（从而再次隐藏所有内容）。但是，如果我点击其他标签，我想淡入该标签的内容。

这是它的一般外观：

The appearance of the user interface.

以下是标签的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中的手风琴菜单，其设置使所有这些系统都可折叠，但任何时候都不能扩展。

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

Answer 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/

Answer 3

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

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

Here是小提琴。

使自定义jQuery选项卡系统正常工作

3 个答案: