JQuery

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...' 在我单击时消失，而 return 在我单击 'Close Article' 时消失...这目前有效，但类似问题的所有其他解决方案似乎只是在下面展开初始（阅读更多...）link，并需要重新单击原始 link 才能再次隐藏它。我希望这是有道理的：/

对于这种事情，我完全是新手；我 missing/doing 哪里错了？

非常感谢提前

Answer 1

检查以下代码url。

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

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

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

Answer 2

改变，全部通过：

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

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

JQuery - 多个 div open/close 独立

JQuery - Multiple divs open/close independently

javascript