Question

我已经在这方面工作了一段时间，并且我想获得一些专家意见。我在标有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 divs使用脉冲工作正常，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（）

干杯

Answer 1

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

http://jqueryui.com/accordion/

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

Answer 2

根据你的结构使它更简单：

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

Answer 3

在这种情况下你可以使用start和jquery选择器，但是需要重命名'suninfo'类名，因为'sun'和'suninfo'类名以'sun'字开头，因此很难使用start和jquery selector 。在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>

有关在JQuery中使用选择器启动的更多信息，请参阅this

替换toggle（）多个div集

3 个答案: