jQuery的新撥動

Question

untoggle菜單我有這樣的小提琴：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你會看到，如果你有超過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); 
}) 

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