Question

我有四个不同的div使用slideToggle功能。我点击它将它们设置为slidetoggle，它们工作正常。但是，当单击一个div时，我希望其余的div关闭。有人可以帮忙吗？下面是我到目前为止的代码。

<div id="01"><p>title</p></div>
    <div id="01_sub"><p>content</p></div>
<div id="02"><p>title</p></div>
    <div id="02_sub"><p>content</p></div>
<div id="03"><p>title</p></div>
    <div id="03_sub"><p>content</p></div>
<div id="04"><p>title</p></div>
    <div id="04_sub"><p>content</p></div>


$('#01_sub').hide();
      $('#01').click(function() {
       $('#01_sub').slideToggle('medium');
     });
     $('#02_sub').hide();
      $('#02').click(function() {
       $('#02_sub').slideToggle('medium');
     });
     $('#03_sub').hide();
      $('#03').click(function() {
       $('#03_sub').slideToggle('medium');
     });
     $('#04_sub').hide();
      $('#04').click(function() {
       $('#04_sub').slideToggle('medium');
     });

所以基本上，如果我点击＃01，我希望＃02，＃03，＃04保持关闭或关闭。如果我点击＃02，我希望其余的关闭。

Answer 1

<div id="01" class="toggle"><p>title</p></div>
<div id="01_sub"><p>content</p></div>
<div id="02" class="toggle"><p>title</p></div>
<div id="02_sub"><p>content</p></div>
<div id="03" class="toggle"><p>title</p></div>
<div id="03_sub"><p>content</p></div>
<div id="04" class="toggle"><p>title</p></div>
<div id="04_sub"><p>content</p></div>

然后

var $toggles = $('.toggle'), $subs = $toggles.next().hide();
$toggles.click(function(){
    var $next = $(this).next().stop(true, true).slideToggle('medium');
    $subs.not($next).slideUp();
});

演示：Fiddle

Answer 2

你应该使用这样的东西：

http://jsfiddle.net/WbYu9/2/

$('.title').click(function(){
    $('.showed').removeClass('showed');
    $(this).addClass('showed');
    $("div[id*='sub']").slideUp();
    if($(this).hasClass('showed')){    
     $("div[id='"+$(this).attr('id')+"_sub']").slideDown();
    }
})

这是更有弹性的形式。

简单的slidtoggle功能与多个div

2 个答案: