Javascript JQuery-独立打开/关闭多个div

我有一个页面，有多个div，我想打开和关闭彼此独立。到目前为止，我的代码如下：

Javascript:

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

HTML:

但是正如您所看到的，虽然第一个div可以正常工作，但后续div不能正常工作，并且还可以通过第一个div的操作打开和关闭。 我还希望“阅读更多…”在我单击时消失，在我单击“关闭文章”时返回。。。这目前是可行的，但所有其他类似问题的解决方案似乎只是在最初的“阅读更多”下面展开。。。链接，并要求重新单击原始链接以再次隐藏它。我希望这是有意义的：/

说到这类事情，我完全是个新手；我错过了什么/做错了什么

---

非常感谢您提前查看以下url上的代码

我已经为每个商店创建了父结构，并用类替换了一些ID。

更改，全部过程如下：

id=show to class=show id=隐藏到类=隐藏 然后：

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

---

由于您是新手，我将代码重新构造为非常基本的代码，并解释了每个部分。正如其他人所说，最好的做法是对页面上重复出现的元素使用类，因为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>

---

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

就像@epascarello提到的，元素id对于页面来说应该是唯一的。太好了，这有助于堆！非常感谢你！只有一件事，有没有办法在点击“阅读更多…”时删除它，并在点击相应的“关闭文章”时再次恢复它？非常欢迎。。这是更新后的链接。谢谢这更好！做我需要的一切。非常感谢：D

$(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();

    });
});

<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>