Question

我已在我的网站上发布了我的简历，并且在页面加载时我隐藏了它的不同部分。我使用slideToggle允许用户点击每个部分来打开或关闭它。那部分工作得很好。但我也希望用户可以选择一次打开或关闭所有部分，而不必逐页向下滚动页面或逐个关闭每个部分。所以我创建了一个＆＃34; Show All＆＃34;页面顶部的选项。一旦我试图让它工作，事情就变得很糟糕。这是我的HTML（只是一个示例），CSS和JQuery：

<div class="toggle">
        <h2><span class="toggleIcon">[+]</span> Education</h2>
            <p>Ph.D. in English, Duke University, 2009-present<p>
            <p class="indent">Certificate in College Teaching</p>
            <p class="indent">Certificate in Feminist Studies</p>
            <p>M.A. in English, Brooklyn College, CUNY, 2008</p>
            <p>B.A. in English and Anthropology, University of Texas, Austin, 2005</p>
    </div>

<div class="toggle">
        <h2><span class="toggleIcon">[+]</span> Publications</h2>
            <h3>Journal Articles</h3>
                <p class="indent">"'After' Theory," in <span>Theory@Buffalo: Conditions of Possibility</span> 13 (2009). Print.</p>
            <h3>Book Chapters</h3>
                <p class="indent">"'I do not want the judgment of any man': The Unstable Animal-Human Boundary in Linguistics and Kafka's 'A Report to an Academy,'' in <span>Of Mice and Men: Animals in Human Culture</span>. Newcastle upon Tyne: Cambridge Scholars Press, 2009. 81-91. Print.</p>
            <h3>Other</h3>
                <p class="indent">Rev. of <span>Chang and Eng Reconnected: The Original Siamese Twins in American Culture</span>, by Cynthia Wu, <span>Imperfect Unions: Staging Miscegenation in U.S. Drama and Fiction</span>, by Diana Rebekkah Paulin, and <span>Racial Indigestion: Eating Bodies in the 19th Century</span>, by Kyla Wazana Tompkins, in <span>American Literature</span> 86.2 (2014): 394-396. Print.</p>
    </div>

#options {
    text-align: center;
    margin-left: -25px;
}

#toggleAllIcon {
    font-style: normal;
    font-weight: normal;
    cursor: pointer;
    font-size: 13px;
}

.toggle p, .toggle h3 {
    display: none;
}

$(function() {
    $(".toggleIcon").click(function() { //when user clicks icon
        $(this).parent().parent().children("h3, p").slideToggle(); //content slides down or up
        });
    });


$(function() {
    $("#toggleAllIcon").click(function() {
        if ( 
            $(".toggle h3, .toggle p").is(":visible")
            ) {
                $(".toggle h3, .toggle p").slideUp(function() {
                    $(".toggle h3, toggle p").slideToggle();
            });
        } else {
            $(".toggle h3, .toggle p").slideToggle();
        };
    });
});

许多使用这些菜单的人只希望一次看到一个部分。只是为了澄清，这不是我的问题。我希望用户能够在需要时一次打开多个部分。我也希望他们可以选择同时控制所有部分。使用我的原始代码，当我单击＆＃34; #toggleAllIcon＆＃34;时，它将控制整个文档，但如果用户已打开某个部分，该部分将关闭，其他部分将打开。我希望它能够工作，这样当您单击该图标时，所有部分可以一起打开或一起打开。我也试过在slideUp之后调用stop但是只关闭了我的所有代码。

您可以看到上述代码会发生什么：http://www.clare-eileen-callahan.com/页面开始跳舞。这显然很困惑。我也想象不仅有一种正确的方法，而且是一种更有效的方式来实现我想要的效果。帮助赞赏！

Answer 1

在我看来，如果你区分切换应该“全部显示”或“全部隐藏”，那将会容易得多。我建议使用toggleClass来确定切换应该做什么（slideUp all或者全部都是slideDown）

$(function() {
    $("#toggleAllIcon").click(function() {
      $("#toggleAllIcon").toggleClass('show-all');

      if($("#toggleAllIcon").hasClass('show-all')) {
        $(".toggle h3, .toggle p").slideDown();
      } 
      else {
        $(".toggle h3, .toggle p").slideUp();
      }
    });
});

请参阅http://codepen.io/anon/pen/dCmak

希望有所帮助。您可能想要考虑的一种情况是，如果用户单击“全部显示”时已经单独展开了所有部分，会发生什么？反之亦然，“全部隐藏”。

slideToggle with slideUp

1 个答案: