为什么我的 jQuery 切换只在一个方向改变类？答案

【问题标题】：Why is my jQuery toggle only changing classes in one direction?为什么我的 jQuery 切换只在一个方向改变类？
【发布时间】：2015-12-18 15:10:28
【问题描述】：

我想这里有一些非常简单的错误，但我无法弄清楚。类名显然是正确的，否则我猜它首先不会加载，所以我不明白为什么它不会在第二次点击时切换回来。

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<div id="nav">
    <div class="drawer">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</div>

<div id="drawerOpener">
    <i class="material-icons" value="Switch Class">menu</i>
</div>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,400italic,600italic,700,700italic,800,800italic);
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e6e6e6;
}

.drawer-closed {
    width: 370px;
    height: 100vh;
    background-color: #fff;
    margin-left: -370px;
    float: left;
    box-shadow: 0px 0px 5px #7f7f7f;
}

.drawer {
    width: 370px;
    height: 100vh;
    background-color: #fff;
    margin-left: 0px;
    float: left;
    box-shadow: 0px 0px 5px #7f7f7f;
}

ul li {
    list-style: none;
    padding: 0em 0em 1em 1em;
    font-family: Open Sans, Sans Serif;
    font-size: 1.25em;
    font-weight: bold;
    float: left;
    clear: left;
}

ul li:first-child {
    padding-top: 1em;
}

#drawerOpener {
    float: left;
    margin-top: 10px;
    margin-left: 18px;
}

jQuery

  $(function() {
    $('#drawerOpener').click(function() {
        $(".drawer").toggleClass("drawer drawer-closed",'normal');
        return false;
    });
  });

codepen 链接：http://codepen.io/chris86/pen/yeOvOe

【问题讨论】：

你也应该用 jQuery UI 标记问题，因为 jQuery toggleClass() 和 UI 有不同的 sig
啊谢谢，我会改的：）

标签： jquery html css jquery-ui nav

【解决方案1】：

问题是因为您在第一次点击时删除了drawer 类。在第二次单击时，没有要选择的 .drawer 元素。如果您更改逻辑以便仅切换 .drawer-closed 类，则代码可以正常工作：

$('#drawerOpener').click(function() {
    $(".drawer").toggleClass("drawer-closed");
    return false;
});

.drawer {
    width: 370px;
    height: 100vh;
    background-color: #fff;
    margin-left: 0px;
    float: left;
    box-shadow: 0px 0px 5px #7f7f7f;
}

.drawer.drawer-closed {
    margin-left: -370px;
}

Updated CodePen

【讨论】：

@A.Wolff 我删除了toggleClass 调用中的normal 参数，因为它不正确。无论您调用哪个库，toggleClass 的第二个参数都应该是布尔值：api.jqueryui.com/toggleClass、api.jquery.com/toggleClass。提供一个“正常”字符串意味着它将始终传递true。
感谢您的回答。您能否在有关逻辑的回答中多解释一点，即我了解删除另一个类是如何造成问题的，但我不太明白添加第二个类附加到第一个类有何帮助。另外......如果我保持“正常”，它会顺利将其移出屏幕，为什么它不正确但似乎提供了一些功能？
@RoryMcCrossan 不，op 在这里使用 jQuery UI toggleClass()。查看我的评论，我也被愚弄了;）
@Chris 第二个类需要通过设置margin-left: -370px;来实际隐藏.drawer元素。
@A.Wolff 我也链接了那个——第二个参数是switch，它接受一个布尔值。我很困惑它是否具有制作动画的效果。

【解决方案2】：

$(".drawer").toggleClass("drawer drawer-closed",'normal');

您在第一次单击时切换类“抽屉”，因此它将被删除。在第二次点击时，它不会找到类“.drawer”，因为它在第一次点击时被删除。

使用另一个没有样式的类来选择元素

【讨论】：

这行代码和原题一样...？
@RoryMcCrossan 重要的部分是解释:)
解决办法大概是$(".drawer").toggleClass("drawer-closed", 'normal');