更换切换（）多个div集

我一直在这一段时间工作，并认为我想得到一些专家的意见。我在标有sun-sun3的页面上有4个div。当每个div被点击时，一个对应的div（suninfo-suninfo3）将会出现，当再次点击时会消失。虽然其中一个信息分区是开放的，但其他分区将始终关闭。更换切换（）多个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的样式，使太阳的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(); 
    }); 
});

正如你所看到的，没有太多的给它和它的工作，但我宁可不使用切换（）

干杯

来源

2014-05-06 user3606621

你可以发布演示，尝试http://jsfiddle.net – elclanrs

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

http://jqueryui.com/accordion/

此外，它不会要求您修改剧本，如果你决定以后添加的div为sun4，sun5，和/或分享帮助等

来源

2014-05-06 05:31:02

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

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

来源

2014-05-06 05:33:32 deadulya

您可以使用jQuery选择在这种情况下开始，但需要重命名“suninfo”类的名字，因为“太阳”和“suninfo”级名字以'sun'字开头，所以使用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>

请JQuery的

看到 this的更多信息，开始有选择调用它在首位

来源

2014-05-06 05:48:10

更换切换（）多个div集

回答

相关问题