jquery - 新切换上的 jQuery 取消切换菜单

Question

我有这个小提琴：http: //jsfiddle.net/9J5Fg/

当一个盒子打开并且我点击另一个盒子时，我想打开盒子关闭然后另一个盒子打开。

非常感谢你！

Answer 1

试试这个http://jsfiddle.net/9J5Fg/2/

或者漂亮干净的 css3 版本http://jsfiddle.net/9J5Fg/3/

Answer 2

您可以编写一个单击事件来处理这个..只需将类添加到两个 div 中，它应该可以正常工作..

JS

$('#tb1 , #tb2').click(function() {
    $('#box-1, #box-2').stop().animate({"height": '0px'}, 400);

    if ( $('#' + this.className).height() == 0) {
        $('#' + this.className).stop().animate({ "height": '50px' }, 400);
   }
});

HTML

<div id="btns">
    <span id="tb1" class="box-1">Toggle box-1</span>
    <span id="tb2" class="box-2">Toggle box-2</span>
</div>

​<a href="http://jsfiddle.net/sushanth009/mZRRa/1/" rel="nofollow">查看演示

Answer 3

正是你需要的:)

首先，您必须确定正在单击哪个链接以及该链接所指的框。之后，您可以切换它的高度。然后你必须关闭其他人。

$('#tb2, #tb1').click(function() {
    var id = this.id.substr(-1),
        $box = $('#box-' + id),
        height = $box.height();

    // toggle box height
    $box.stop().animate({"height": (height == 50 ? 0 : 50) + 'px'}, 400);
    // close other boxes
    $('#container div').not($box).stop().animate({"height": '0px'}, 400);
});

演示

如果您查看此演示，您会发现如果您有 2 个以上的框，则此代码有效，您只需将点击选择器更改为$('#btns span').

Answer 4

更抽象一点..如果您愿意更改您的html，可以更好地编码

$('#btns span').on('click', function () {

    var btnId = $(this).attr('id'),
        $container = $('#box-' + btnId.substr(2)),
        open = $container.height() > 0;

    $('#container div').not($container).stop(true, true).animate({"height": '0px'}, 400);

    $container.stop(true, true).animate({"height": (open ? '0px' : '50px')}, 400);
})

​</p>

http://jsfiddle.net/9J5Fg/5/