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> 

这是一个较长的，抽出的回答可以帮助您了解什么概念应该发生以及它如何工作。一旦你理解了代码背后的想法，你可以缩短它。