单击滑动切换 div 但先隐藏其他人 - jQuery [英] On click slidetoggle div but hide others first - jQuery

问题描述

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

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

我有以下...

$('.office-title').click(function(){$(this).next('div').slideToggle();返回假；});

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

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

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

解决方案

</office> 不是有效的结束语.结束应该是 </div>

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

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

CSS:

.office{显示:无；}

和jquery:

$(function () {$('.office-title').click(function () {$(this).next('div').slideToggle();$(this).parent().siblings().children().next().slideUp();返回假；});});

您可以在这里查看

I have a page that when a user clicks a title, the following div toggles display.

I want to somehow say if any other divs are display:block then set them to display none first.

I have the following...

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

and my html markup is as such...

<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>

解决方案

</office> is not a valid closing. The closing should be </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;
}

and jquery:

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

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

HERE YOU CAN CHECK

这篇关于单击滑动切换 div 但先隐藏其他人 - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！