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>

CHECK DEMO

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

demo

如果你看this demo，如果你有两个以上的盒子，你会看到这段代码有效，你只需将点击选择器改为$('#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);
})

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

新切换时的jQuery切换菜单

4 个答案: