1

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

4

3 回答 3

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;
    });
});
于 2013-07-28T13:12:58.710 回答
1 
$(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/

于 2013-07-28T13:59:34.950 回答
0

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

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

这是小提琴。

于 2013-07-28T14:38:08.073 回答