替换 toggle() 多个 div 集答案

【问题标题】：Replacement for toggle() multiple div sets替换 toggle() 多个 div 集
【发布时间】：2014-05-06 05:14:35
【问题描述】：

我已经为此工作了一段时间，并想获得一些专家建议。我在标有 sun-sun3 的页面上有 4 个 div。当每个 div 被单击时，相应的 div (suninfo-suninfo3) 会出现，再次单击时会消失。当信息 div 之一打开时，其他信息 div 将始终关闭。

这里是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>

CSS 的样式使 sun div 使用可以正常工作的脉冲，并且 suninfo div 出现在页面周围的不同位置。一切正常。

以下 Javascript 也可以正常工作，但它使用的是我想替换的 toggle()。我的代码也很长。

$(document).ready(function(){

  $(".sun").click(function(){
   $(".suninfo").toggle();
   $(".suninfo1,.suninfo2,.suninfo3").hide();
  });
  $(".sun1").click(function(){
    $(".suninfo1").toggle();
    $(".suninfo,.suninfo2,.suninfo3").hide();
  });
  $(".sun2").click(function(){
    $(".suninfo2").toggle();
    $(".suninfo,.suninfo1,.suninfo3").hide();
  });
  $(".sun3").click(function(){
    $(".suninfo3").toggle();
    $(".suninfo,.suninfo1,.suninfo2").hide();
  });
});

如您所见，它并没有什么用处，而且它确实有效，但我宁愿不使用 toggle()

干杯

【问题讨论】：

能发个demo吗，试试jsfiddle.net

标签： javascript html toggle hide show

【解决方案1】：

我建议为此使用 jQueryUI——因为它提供了开箱即用的功能。

http://jqueryui.com/accordion/

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

【讨论】：

【解决方案2】：

在这种情况下可以使用 start with jquery 选择器，但需要重命名 'suninfo' 类名，因为 'sun' 和 'suninfo' 类名以 'sun' 单词开头，因此很难使用 start with jquery 选择器.在 div 中写入时，选择器类名也应该是第一个

如果我们使用$("[class^='suninfo']")，那么suninfo应该首先调用<div class="suninfo info">。

请看下面的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>

请参阅this 了解更多关于在 JQuery 中使用选择器开始的信息

【讨论】：

【解决方案3】：

根据您的结构使其更简单：

$(".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

【讨论】：