jquery切換 - 在多個div上展開/摺疊

Question

我最近發現了一些非常容易使用的Jquery代碼，它們基本上切換和div可見並且不可見。

該代碼正在處理第一個div - 但可以說我擁有多個具有相同結構的下拉列表，並且我希望切換到特定的第二個或第三個div點擊。

我想知道是否有可能擴展下面的代碼爲動態的。

例如用兩個div（僅第一個將工作）：

<a id="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a id="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div> 

的Jquery：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

$(function() // run after page loads 
{ 
    $("#toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $("#content, #contentHidden").toggle(); 
    }); 
}); 

Answer 1

首先，標識應該是每一個DOM樹對象上是獨一無二的。 （使用id =「切換」多格最終會工作，但並不建議用體型class屬性在這種情況下。）

您的問題，我建議：

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div> 

和jQuery代碼：

$(function() 
{ 
    $(".toggle").click(function() 
    { 
     // hides children divs if shown, shows if hidden 
     $(this).children("div").toggle(); 
    }); 
}); 

Answer 2

它與第一個div只能因爲ID必須是頁面上獨一無二的。你應該使用類來處理多個標籤。

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div> 
</div> 
<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div> 
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div> 
</div> 

的Jquery：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

$(function() // run after page loads 
{ 
    $(".toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $(".content, .contentHidden", $(this).next()).toggle(); 
    }); 
}); 

Answer 3

第一：你不能用相同的ID（切換）多次。

<a class="toggle" href="#">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="#">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div> 

$('.toggle').click(function() { 
    var content = $(this).next(); 
    $(content).toggle(); 
    $(content).next().toggle(); // three lines above can also be done in a one-liner, but I prefer separate line for readability. In the end it's a matter of taste 
    return false; 
}); 

我已經改變了切換id到class，因爲它是無效的HTML重複使用相同的ID在頁面上。 Id必須是唯一的。

.next()選擇樹中

Answer 4

id屬性應該是唯一的下一DOM元素（妹妹）。您需要將其更改爲一個類：只有一個作品，因爲事件只附着在第一個匹配的ID在這種情況下：

所有的

$(function() // run after page loads 
{ 
    $(".toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle(); 
    $(this).next().next().toggle(); 

    return false; 
    }); 
}); 

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div>Content 1</div> 
<div style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div>Content 2</div> 
<div style="display:none;">Hidden 2</div> 

Answer 5

拳你一定不要超過一次使用IDS。

無論如何，你可以這樣做：（http://jsfiddle.net/7Kmny/）

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div> 
    $(".toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle(); 
    $(this).next().next().toggle(); 
    });