slideToggle与slideUp

Question

我已经在我的网站上张贴了我的简历，我已经得到了不同的部分，它隐藏在页面加载。我使用slideToggle允许用户单击每个部分来打开或关闭它。那部分效果很好。但我也希望用户可以选择一次打开或关闭所有部分，而不是一个一个地向下滚动页面打开或关闭每个部分。所以我在页面顶部创建了一个“显示所有”选项。一旦我试着让它起作用，事情就变得不稳定了。下面是我的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();
        };
    });
});

许多使用这些菜单的人一次只想看到一个区段。澄清一下，这不是我的问题。我希望用户能够一次打开多个区段，如果他们愿意的话。我也希望他们可以选择同时控制所有的部分。使用我的原始代码，当我单击"#toggleAllIcon“时，它将控制整个文档，但是如果用户已经打开了一个区段，该部分将关闭，其他部分将打开。我希望它能够工作，这样当你点击那个图标时，所有的部分要么一起打开，要么关闭在一起。我还试着在slideUp之后调用stop，但这只会关闭我的所有代码。

您可以看到上面的代码发生了什么：http://www.clare-eileen-callahan.com/页面开始跳舞。很明显很困惑。我也认为，有一个不只是一个正确的方式，但更有效的方式，以实现我想要的效果。帮助感激！

Answer 1

在我看来，如果您区分切换应该是“显示全部”还是“隐藏所有”，则会容易得多。我建议使用toggleClass来确定切换应该做什么(slideUp all或slideDown all)

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

希望这能帮点忙。您可能需要考虑的一个场景是，当用户单击"Show“时，如果用户已经单独扩展了所有部分，会发生什么？反之亦然，“隐藏一切”。