jquery - 为什么我的 jQuery 切换只在一个方向上改变类？-6ren

jquery - 为什么我的 jQuery 切换只在一个方向上改变类？

转载作者：太空宇宙更新时间：2023-11-04 14:13:41

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

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

代码笔链接:http://codepen.io/chris86/pen/yeOvOe

最佳答案

问题是因为您在第一次点击时删除了 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

关于jquery - 为什么我的 jQuery 切换只在一个方向上改变类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34358592/