为什么我的 jQuery 开关只在一个方向上改变类？

Question

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

<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;
    });
  });

Link 代码笔：http://codepen.io/chris86/pen/yeOvOe

Answer 1

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

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

Answer 2

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

您在第一次点击时切换了 class "drawer"，因此它将被删除。第二次点击它找不到 class“.drawer”，因为它在第一次点击时被删除了。

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

为什么我的 jQuery 开关只在一个方向上改变类？

Why is my jQuery toggle only changing classes in one direction?

html

css

jquery

jquery-ui

nav

为什么我的 jQuery 开关只在一个方向上改变 类？

Why is my jQuery toggle only changing classes in one direction?

html

css

jquery

jquery-ui

nav

为什么我的 jQuery 开关只在一个方向上改变类？