JavaScript不删除类

我正在处理一个JavaScript类，所以当单击具有父类的链接时，它将删除它，然后添加一个.open类

我让addClass工作，但单击时没有删除父类

当单击“关闭”时，应删除“打开”类并将其还原回父类。

JavaScript代码

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

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

$（'.parent'）。在（'click'，function（）上{
$（'.parent'）.addClass（'.open'）.removeClass（'.parent'）；
});

HTML代码

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

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

仪表板统计数据

您不应在和中添加句点：

替换：

$('.parent').addClass('.open').removeClass('.parent');

与：

---

此外，在事件侦听器中使用

$（this）

而不是

$（'.parent'）

更有效，因为

this

是单击事件的目标。jQuery将不必查找

。父项，那么。
无需应用。作为类添加或删除类时

试试这样的

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


$（'.parent'）。在（'click'，function（）上{
$（this）.addClass（'open'）.removeClass（'parent'）；
});

整个想法是在点击链接时切换类“parent”和“open”
由于动态元素类，它应该是
$（静态选择器）。在（'click'，'parent，.open'
）上


只需提一下：使用
$（this）
而不是
$（'.parent'）更符合逻辑
内部单击事件处理程序。没错。我会将其添加到答案中。好吧，这不仅仅是关于效率。如果页面上有多个
.parent
，原始代码将导致添加
。打开所有
。parent
元素，而不仅仅是单击的元素。如果链接关闭，是否也可以恢复到parentd？@acoderslife看看如何做到这一点。
$(document).ready(function()
{
    $(document).on('click', '.parent,.open', function()
    {
        $(this).toggleClass("parent open");
    });
});