如何在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