5

我有一个页面，当用户单击标题时，以下 div 会切换显示。

我想以某种方式说是否有任何其他 div 是 display:block 然后将它们设置为先不显示。

我有以下...

$('.office-title').click(function(){
     $(this).next('div').slideToggle();
     return false;
});

我的html标记就是这样......

<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
4

5 回答 5

17

</office>不是有效的结束。收盘应该是</div>

<div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
      </div>
    <div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
    </div>
    <div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
    </div>

CSS：

.office
{
    display: none;
}

和jQuery：

$(function () {
    $('.office-title').click(function () {
        $(this).next('div').slideToggle();

        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
});

在这里你可以检查

于 2013-02-12T17:50:13.830 回答
2

这应该这样做：http: //jsfiddle.net/gKgJ7/

$('.office-title').click(function(){
   $('.office').slideUp();
   $(this).next('div').slideToggle();
   return false;
});

笔记：

这不是一个有效的结束：

<div class="office">sadasd</office>
   //---------------------^^^^^^^^----should be </div>
于 2013-02-12T17:25:36.723 回答
1 
$('.office-title').click(function(){
     $(this).next('div').slideToggle();
     $(this).parent(".office-row").siblings().hide(); // this should help
     return false;
});
于 2013-02-12T17:21:36.667 回答
0

尝试如下...它会工作...

小提琴：http: //jsfiddle.net/RYh7U/83/

    $(document).ready(function () {
        $('.office-title').next('div').slideToggle();
        $('.office-title').click(function(){   
        $('.office-title').next('div').slideUp();
        $(this).next('div').slideToggle(); 
        return false;
        });
     });
于 2013-02-12T17:29:51.277 回答
0

这将用动画关闭所有打开的 div 并打开所需的 div 

$('.office-title').click(function(){
     var that = $(this);
     if('.office').each(function() {
       if($(this) == $(that).next('div')) {
          $(this).slideToggle();
       }
       else {
          if($(this).css('display')!=='none') {
             $(this).slideToggle();
          }
       }
     });
     return false;
});
于 2013-02-12T17:31:35.437 回答