Question

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

dmugtasimov@dmugtasimov-ThinkPad-Edge-E440 ~ $ rabbitmqadmin -u guest -p guest list vhosts
+---------+----------+----------------+-------------------------+----------+----------+---------+
|  name   | messages | messages_ready | messages_unacknowledged | recv_oct | send_oct | tracing |
+---------+----------+----------------+-------------------------+----------+----------+---------+
| myvhost | 1        | 1              | 0                       | 231903   | 229228   | False   |
+---------+----------+----------------+-------------------------+----------+----------+---------+
dmugtasimov@dmugtasimov-ThinkPad-Edge-E440 ~ $ rabbitmqadmin -u guest -p guest list queues
No items
dmugtasimov@dmugtasimov-ThinkPad-Edge-E440 ~ $ sudo rabbitmqctl list_queues
Listing queues ...
...done.
dmugtasimov@dmugtasimov-ThinkPad-Edge-E440 ~ $ rabbitmqadmin -u guest -p guest -V myvhost get queue=celery requeue=true count=10
*** Access refused: /api/queues/myvhost/celery/get

CSS：

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

的jQuery

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

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

Answer 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

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

1 个答案: