Javascript 替换toggle（）多个div集

我在这方面已经工作了一段时间，我想得到一些专家的建议。 我在一个标签为sun-sun3的页面上有4个div。单击每个div时，将显示相应的div suninfo-suninfo3，再次单击时将消失。当其中一个信息分区打开时，其他信息分区将始终关闭

这是html

<div class="dot sun">
</div>
<div class="info suninfo">Some Content</div>
<div class="dot sun1">
</div>
<div class="info suninfo1">Some Content</div>
<div class="dot sun2">
</div>
<div class="info suninfo2">Some Content</div>
<div class="dot sun3">
</div>
<div class="info suninfo3">Some Content</div>

正如您所看到的，它没有太多功能，而且确实有效，但我不想使用toggle

---

干杯

我建议为此利用jQueryUI，因为它提供了开箱即用的功能

---

此外，如果您决定以后为sun4、sun5和/或sun6等添加div，则无需修改脚本。

为了根据您的结构使脚本更简单：

$(".dot").each(function(){
    $(this).click(function(){
       $(this).next().toggle();
       $(".info").not($(this.next())).hide();
    })
})

你为什么不喜欢钮扣？ 要手动控制它，您可以：

$(element).hide('slide',{direction:'left'},1500) //([animation, params, time])
$(element).show('slide')

---

如果使用jQuery

在这种情况下，您可以使用带jQuery选择器的start，但需要重命名“suninfo”类名，因为“sun”和“suninfo”类名以“sun”字开头，因此使用带jQuery选择器的start将很困难。此外，在div中写入时，选择器类名应位于第一位

就像我们使用的是$[class^='suninfo']，那么suninfo应该是第一个被调用的

请参见下面的jquery

$(document).ready(function(){
  $("[class^='sun']").click(function(){
      var nextElement = $(this).next();
      $(nextElement).toggle();
      $("[class^='infoSun']").not($(nextElement)).hide();
});

这里将您的suninfo类重命名为infoSun，并在第一个位置调用它，如下所示

<div class="dot sun">
</div>
<div class="infoSun info">Some Content</div>
<div class="dot sun1">
</div>
<div class="infoSun1 info">Some Content</div>
<div class="dot sun2">
</div>
<div class="infoSun2 info">Some Content</div>
<div class="dot sun3">
</div>
<div class="infoSun3 info">Some Content</div>

有关JQuery中的start with selector的更多信息，请参见

<div class="dot sun">
</div>
<div class="infoSun info">Some Content</div>
<div class="dot sun1">
</div>
<div class="infoSun1 info">Some Content</div>
<div class="dot sun2">
</div>
<div class="infoSun2 info">Some Content</div>
<div class="dot sun3">
</div>
<div class="infoSun3 info">Some Content</div>