更換切換（）多個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集

回答

相關問題