Question

我正在尝试创建一个带标签的手风琴式下拉菜单。我已经玩了一段时间的jQuery，但无法让活跃状态以100％的速度运行。

我很确定这是JS我搞砸了。

$('.service-button').click(function () {
    var itemid = '#div' + $(this).attr('target'); //id of the element to show/hide.

    if ($('.active').length === 0) {
        $(itemid).slideDown();
        $(itemid).addClass('active');
        $(this).addClass('new');

    } else if (itemid == "#" + $('.active').attr('id')) {
        $('.active').slideUp();
        $(itemid).removeClass('active');
        $(this).removeClass('new');

    } else {
        $('.active').slideUp(function () {
            $(this).removeClass('active');
            $('.service-button').removeClass('new');
            if ($(".targetDiv:animated").length === 0) {
                $(itemid).slideDown();
                $(itemid).addClass('active');
                $(this).addClass('new');
            }
        });
    }
});

我在这里创造了一个小提琴http://jsfiddle.net/NWxLe/

下拉列表正常工作，活动状态应用于第一个选项卡。但是，当我尝试打开另一个选项卡时，会出现问题。活动状态将从前一个状态中删除，但不会添加到新状态。我希望这是有道理的。

任何帮助都会受到大力赞赏！

感谢。

Answer 1

您的代码可以简化一下。您实际上只需要一个if和一个else，因为您单击的标签要么已处于活动状态，要么不是

$('.service-button').click(function () {
    var itemid = '#div' + $(this).attr('target');
    var $activetab = $(this);

    // If the tab is not already active    
    if (!$activetab.hasClass('new')) {
        $('.new').removeClass('new');
        $('.active').slideUp();
        $('.active').removeClass('active');

        // Wait for the slideUp to complete (default slideUp time is 500ms)
        // This is to keep the same behavior as your linked demo
        setTimeout(function() { 
            $activetab.addClass('new');
            $(itemid).slideDown();
            $(itemid).addClass('active')
        }, 500);
    } else { // If the tab is active already
        $('.new').removeClass('new');
        $('.active').slideUp();
        $('.active').removeClass('active');
    }
});

Demo

Answer 2

您需要可折叠的手风琴或标签吗？如果你想要手风琴，你可以去：

    <!--1st accordion -->
<div id = "accordion1" class = "E W accordion-item">
    <div class = "accordion-item-header clearfix">
        <div>
            <a data-accordion = "" href = "#accordion1"><i class = "accord-opener"></i><span>click Me</span></a>
        </div>
    </div>
    <div class = "accordion-item-body ">
        <div class = "data-content">
            <h3>This is accordion content</h3>            
        </div>    
    </div>
</div>
<!--end accordion -->
<!--2nd accordion -->
<div id = "accordion2" class = "E W accordion-item">
    <div class = "accordion-item-header clearfix">
        <div>
          <a data-accordion = "" href = "#accordion2"><i class = "accord-opener"></i><span>click Me</span></a>
        </div>
    </div>
    <div class = "accordion-item-body ">
        <div class = "data-content">
            <h3>This is accordion content</h3>            
        </div>    
    </div>
</div>
<!--end accordion -->
<!--3rd accordion -->
<div id = "accordion3" class = "E W accordion-item">
    <div class = "accordion-item-header clearfix">
        <div>
            <a data-accordion = "" href = "#accordion3"><i class = "accord-opener"></i><span>click Me</span></a>
        </div>
    </div>
    <div class = "accordion-item-body ">
        <div class = "data-content">
            <h3>This is accordion content</h3>            
        </div>    
    </div>
</div>
<!--end accordion -->

示例CSS：

.accordion-item-header {
 display:block;
 width:340px;
 height:40px;
 background:#454545;
 border:1px solid yellow;   
 }
.accordion-item-header > div > a { 
 color:#f8f8f8;
 line-height:40px;
 text-decoration:none;
 padding-left:10px
 }
.accordion-item-body {
 width:338px;
 height:100px;
 border:1px solid black;
 display:none;
 }

小提琴：http://jsfiddle.net/nucleo1985/NWxLe/33/

主动下拉链接

2 个答案: