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