如何在jQuery中切换所有未选中的元素

Question

我正在尝试执行以下操作：

• 一个页面上有多个“标题”和“文本” div。
• 加载页面后，仅第一个文本可见。
• 单击任何标题时，其文字向下滑动，所有其他文字向上滑动。

到目前为止，我提出了以下内容：HTML：

<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>
<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>
<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>
<div class="row clearfix">
    <div class="title"></div>
    <div class="text"></div>
</div>

jQuery的：

$('.title').click(function () {
    $(this).next().slideToggle();
})

https://jsfiddle.net/e3okos3e/

但是，这是非常基本的。

您能告诉我如何选择除所选标题以外的所有文本吗？ 如何在加载时仅显示第一个？

Answer 1

因此，如果默认情况下隐藏所有text div，请执行以下操作：

 $(document).ready(function(){ $('.title').click(function () { $('.active').slideToggle().removeClass('active'); $(this).next().slideToggle().addClass('active'); }) }); 

 .title { width: 100px; height: 20px; border: 1px solid #cc0; } .text { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row clearfix"> <div class="title"></div> <div class="text">text1</div> </div> <div class="row clearfix"> <div class="title"></div> <div class="text">text2</div> </div> <div class="row clearfix"> <div class="title"></div> <div class="text">text3</div> </div> <div class="row clearfix"> <div class="title"></div> <div class="text">text4</div> </div> 

Answer 2

使用not()相当简单

var $text = $('.text');// cache elements

$('.title').click(function () {
    var $next = $(this).next().slideDown();// or slideToggle()
    $text.not($next).slideUp();
});

DEMO