Jquery 滑动与滑动切换

我已经在我的网站上发布了我的简历，当页面加载时，我会将其中的不同部分隐藏起来。我使用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();
        };
    });
});

[+]教育
博士。英语，杜克大学，2009年至今
大学教学证书

女性主义研究证书

纽约大学布鲁克林学院英语硕士，2008年

德克萨斯大学英语与人类学学士学位，奥斯丁，2005
[+]出版物
期刊文章
“‘之后’理论”，在Theory@Buffalo：可能性条件13（2009年）。印刷品
书章
“‘我不想要任何人的判断’：语言学中不稳定的动物-人类边界和卡夫卡的《给学院的报告》，《人与鼠：人类文化中的动物》。泰恩河畔纽卡斯尔：剑桥学者出版社，2009年。81-91。印刷
其他
张和英版《重新连接：美国文化中的原始暹罗双胞胎》，辛西娅·吴著，《不完美的结合：在美国戏剧和小说中上演异族通婚》，黛安娜·丽贝卡·保林著，《种族消化不良：19世纪吃人的身体》，凯拉·瓦扎娜·汤普金斯著，《美国文学》86.2（2014）：394-396.印刷品
#选择权{
文本对齐：居中；
左边距：-25px；
}
#托格利利康{
字体风格：普通；
字体大小：正常；
光标：指针；
字体大小：13px；
}
.切换p.切换h3{
显示：无；
}
$（函数（）{
$（“.toggleIcon”）。当用户单击图标时，单击（函数（）{//
$（this）.parent（）.parent（）.children（“h3，p”）.slideToggle（）；//内容向下或向上滑动
});
});
$（函数（）{
$（“#toggleAllIcon”）。单击（函数（）{
如果（
$（“.toggle h3，.toggle p”）。为（“：可见”）
) {
$（“.toggle h3，.toggle p”）.slideUp（函数（）{
$（“.toggle h3，toggle p”）.slideToggle（）；
});
}否则{
$（“.toggle h3，.toggle p”）.slideToggle（）；
};
});
});

很多使用这些菜单的人一次只想看到一个部分。我只是想澄清一下，这不是我的问题。我希望用户能够在需要的情况下同时打开多个部分。我还希望他们可以选择同时控制所有部分。在我的原始代码中，当我单击“#toggallicon”时，它将控制整个文档，但如果用户已打开某个节，则该节将关闭，其他节将打开。我希望它能工作，这样当你点击那个图标时，所有部分要么一起打开，要么一起关闭。我还尝试在slideUp之后调用stop，但这只是关闭了我所有的代码

---

您可以看到上面的代码发生了什么：页面开始跳舞。这显然很混乱。我还认为，要达到我想要的效果，不仅有一种正确的方法，而且还有一种更有效的方法。谢谢你的帮助

在我看来，如果您区分切换的时间应该是“全部显示”还是“全部隐藏”，那就容易多了。我建议使用来确定切换应该做什么（slideUp all或slideDown all）

看

---

希望这有点帮助。您可能需要考虑的一个场景是，如果用户在单击“显示全部”时已经单独扩展了所有的区段，会发生什么情况？反之亦然，使用“全部隐藏”。

这个if语句是什么<代码>如果（$（“.toggle h3，.toggle p”）.是（“：可见”）{$（“.toggle h3，.toggle p”）.slideUp（函数（）{$（“.toggle h3，toggle p”）.slideToggle（）；}）另外，我不确定在这里发布这样的个人信息是否明智，但我不知道SO对此是否有任何政策。要切换所有这些，为什么不在

上单击
。切换图标
元素，因为您已经设置了该事件？“我希望它能正常工作，这样当你单击该图标时，所有部分都可以打开或关闭"要满足此语句，您可以创建一个不起任何作用的按钮。您能重新措辞吗？编辑：哦，您的意思是，ShowAll和HideAll，而不是toggall.popleak，这样，当您单击show all图标时，所有部分都可以同时打开或关闭。DLeh，if语句是试图在调用slideToggle之前让所有部分再次向上滑动这样所有的部分都可以同时打开或关闭，而不是打开或关闭一些部分。此外，这是所有的公开信息-在我的网站上。效果很好。我能在其中写一个}if else（）语句来说明用户是否已经单独扩展了所有部分吗？是的，首先，我会看一下您的原始if语句-
if（$（“.toggle h3.toggle p”）.is（“：visible”）
-如果我认为所有内容都隐藏了，那么应该返回false吗？我还没有测试过。
$(function() {
    $("#toggleAllIcon").click(function() {
      $("#toggleAllIcon").toggleClass('show-all');

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