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'时返回...这当前有效，但所有其他类似问题的解决方案似乎只是在初始下方展开（Read更多...）链接，并要求重新点击原始链接以再次隐藏它。我希望这是有道理的：/

当涉及到这种事情时，我是一个完整的新手;我错过了什么/做错了什么？

非常感谢提前

Answer 1

检查以下网址上的代码。

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独立打开/关闭

3 个答案: