当单击另一个时，javascript slideToogle不隐藏

我有3个点击事件

A、B、C

当我单击A时，A显示“aaaaa”

当我点击B时，B显示“BBBBBBB”

当我点击C时，C显示“CCCC”

问题是当我点击A，然后点击B，A仍然显示

我想要的是A在单击B或C时自动隐藏

现在，如果我单击全部3（a、b、c），它将显示全部。但我只想一个接一个地展示出来

这是我的代码：

Javascript

 $(function () {
          $('.expandContent3 span').click(function () {
              $('.showMe3').slideToggle('slow');
          });
      });
      $(function () {
          $('.expandContent1 span').click(function () {
              $('.showMe1').slideToggle('slow');
          });
      });
      $(function () {
          $('.expandContent2 span').click(function () {
              $('.showMe2').slideToggle('slow');
          });

HTML代码：

  <div class="readMore1 expandContent1" style="cursor: pointer;float: left;margin-right: 8px;">
<span><b>A</b></span></div>
<div class="readMore2 expandContent2" style="cursor: pointer;float: left;margin-right: 8px;">
<span><b>B</b></span></div>
   <div class="readMore3 expandContent3" style="cursor: pointer;float: left;margin-right: 8px;">
<span><b>C</b></span></div>

 <div class="showMe1" style="display:none; clear:both;">
<p><b>aaaaaaa</b></p>
<p><b>aaaaaaa</b></p>
 </div>

 <div class="showMe2" style="display:none; clear:both;">
<p><b>Bbbbbbbbb</b></p>
<p><b>Bbbbbbbbb</b></p>
</div>

<div class="showMe3" style="display:none; clear:both;">
<p><b>Cccccccc</b></p>
<p><b>Ccccccc</b></p>
 </div>

A.
B
C
AAAAAAAA

AAAAAAAA

bbbbbbbbbb

bbbbbbbbbb

中交

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

---

有什么想法吗？

您需要向所有单击处理程序添加检查：

$('.expandContent1 span').click(function () {
    $('.showMe1').slideToggle('slow');
    if( $('.showMe2').is( ':visible' ) ) $('.showMe2').slideUp('slow');
    if( $('.showMe3').is( ':visible' ) ) $('.showMe3').slideUp('slow');
});

等

编辑

如果你有很多这样的东西，你可以实现“手风琴”功能，例如通过将所有类名从

readMore[n]

更改为

readMore

，同样的方法是将

showMe[n]

更改为

showMe

。并将您的JS更改为：

$(function () {
  $('.readMore').click(function () {
    $('.showMe').slideUp('slow');
    $('.showMe').eq( $( this ).index() ).slideDown('slow');
  });
});

看

---

别忘了保持你的

readMore

和

showMe

块在布局中的顺序。

这很有效，但一旦我为a-z做了，代码就会很长。我必须使用expandContent1来expanadContent26，以及所有的if语句。我只有3个扩展内容，因为它已经太多了。没有办法修改代码。谢谢，很有效。但是看看我添加的更新，对我来说效果更好。@al123最好将您的更新添加到原始问题或添加您自己的答案。干杯；）