JavaScript 不删除类

Question

我正在开发一个 JavaScript 类，因此当单击具有父类的链接时，它将删除它，然后添加一个 .open 类

我有 addClass 工作但点击时没有删除父类。

并且当点击关闭时应该删除打开的类并将其恢复为父类。

JavaScript 代码

<script type="text/javascript">
    $('.parent').on('click', function() {
        $('.parent').addClass('.open').removeClass('.parent');
    });
</script>

HTML 代码

<div class="site-container">
<header id="header">

</header>

<div id="column_left" class="active">
<nav id="menu">
<ul class="nav">
<li><a href="<?php echo base_url('admin/dashboard');?>"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a></li>

<li><a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> <span>System</span></a>
    <ul id="setting" class="nav collapse">
        <li><a data-toggle="collapse" data-target="#user">Users</a>
            <ul id="user" class="nav collapse">
                <li><a href="#">Users</a></li>
                <li><a href="#">User Group</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>
</nav>
</div>

<div class="page-container">
    <div class="container-fluid">
    <div class="page-header">
    <h1>Dashboard <small>Dashboard Stats</small></h1>
    </div>
    </div>
</div>

</div>

Answer 1

• 整个想法是在单击链接时切换类“parent”和“open”。
• 由于动态元素类，它应该是 $(static_selector).on('click', '.parent,.open'。

JSFiddle example .

$(document).ready(function()
{
    $(document).on('click', '.parent,.open', function()
    {
        $(this).toggleClass("parent open");
    });
});