JQuery - 多個div獨立打開/關閉

Question

我有一個頁面有多個div，我想彼此獨立打開和關閉。到目前爲止我的代碼是在這裏：http://jsfiddle.net/Einulfr/q4ra0gbb/

的Javascript：

$(document).ready(function() { 
    $("#hide").click(function() { 
     $("#show").show(); 
     $(".expandedText").hide(); 
    }); 
    $("#show").click(function() { 
     $("#show").hide(); 
     $(".expandedText").show(); 
    }); 
}); 

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<h2>Title of First Article</h2> 

<p>Story introduction paragraph here...</p> 
<a href="#" id="show">Read More...</a> 

<div class="expandedText" style="display: none;> 
    <p>Story continued here in second paragraph...</p> 
    <p>Story continued here in third paragraph...</p> <a href="#" id="hide">Close Article</a> 

</div> 

<h2>Title of Second Article</h2> 

<p>Story introduction paragraph here...</p> 
<a href="#" id="show">Read More...</a> 

<div class="expandedText" style="display: none;> 
    <p>Story continued here in second paragraph...</p> 
    <p>Story continued here in third paragraph...</p> <a href="#" id="hide">Close Article</a> 

</div> 

但正如你所看到的，而第一個工作正常，後續的div不和也開放和關閉第一個div的操作。 我也希望'Read More ...'在點擊時消失，當我點擊'Close Article'時返回...目前這種方法可行，但對類似問題的其他解決方案似乎只是在最初的閱讀更多...）鏈接，並要求重新點擊原始鏈接以再次隱藏它。我希望這是有道理的：/

我是一個完全新手，當談到這種事情;我錯過了什麼/做錯了什麼？

非常感謝提前

Answer 1

變化，所有通過：

• id="show"到class="show"
• id="hide"到class="hide"

然後：

$(document).ready(function() { 
    $(".hide").click(function() { 
     $(this).closest(".expandedText").hide().prev(".show").show(); 
    }); 
    $(".show").click(function() { 
     $(this).hide().next(".expandedText").show(); 
    }); 
}); 

Answer 2

檢查下列網址上的代碼。

http://jsfiddle.net/q4ra0gbb/3/

$(document).ready(function() { 
    $(".story .btnShow").click(function(){ 
     $(this).parent().find(".expandedText").show();  
    }); 
    $(".story .btnHid").click(function(){ 
     $(this).parent().hide();  
    }); 
}); 

我創建父結構爲每個商店和替換了一些IDS帶班。

Answer 3

由於你是新的，我將代碼重構爲非常基本的，並解釋了每個部分。正如其他人所說，對於在頁面上重複使用的元素，最好使用classes，因爲id僅用於單次出現。

jQuery的

$(document).ready(function() { 

    function hideExpanded() 
    { 
     // Hide all expandedText divs that may be open 
     $('div.expandedText').hide(); 

     // Show all the read more buttons 
     $('a.show').show(); 
    } 

    $('a.hide').click(function(e) { 

     // Prevent the page from bouncing to the top 
     e.preventDefault(); 

     // Close all of the expanded text and show the read more button 
     hideExpanded(); 

    }); 
    $('a.show').click(function(e) { 

     // Prevent the page from bouncing to the top 
     e.preventDefault(); 

     // Close all of the expanded text and show the read more button 
     hideExpanded(); 

     /* 
     * Show the expandedText div associated with 
     * the parent element of the button clicked 
     */ 
     $(this).parent().find('div.expandedText').show(); 

     // Hide the read more button that was just clicked 
     $(this).hide(); 

    }); 
}); 

的HTML

<div class="article"> 
    <h2>Title of First Article</h2> 
    <p>Story introduction paragraph here...</p> 
    <a href="#" class="show">Read More...</a> 
    <div class="expandedText" style="display: none;"> 
     <p>Story continued here in second paragraph...</p> 
     <p>Story continued here in third paragraph...</p> 
     <a href="#" class="hide">Close Article</a> 
    </div> 
</div> 
<div class="article"> 
    <h2>Title of Second Article</h2> 
    <p>Story introduction paragraph here...</p> 
    <a href="#" class="show">Read More...</a> 
    <div class="expandedText" style="display: none;"> 
     <p>Story continued here in second paragraph...</p> 
     <p>Story continued here in third paragraph...</p> 
     <a href="#" class="hide">Close Article</a> 
    </div> 
</div> 

這是一個較長的，抽出的回答可以幫助您瞭解什麼概念應該發生以及它如何工作。一旦你理解了代碼背後的想法，你可以縮短它。