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

您不应该在addClass()和removeClass()中添加句点：

替换：

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

使用：

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

此外，在事件监听器中使用$(this)而不是$('.parent')更有效，因为this是click事件的目标。然后，jQuery不必寻找.parent。

Answer 2

尝试这样的事情

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

Answer 3

无需申请。添加或删除类时的类check here

$('.parent').on('click', function() {
        $('.parent').addClass('open').removeClass('parent');
});

Answer 4

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

JSFiddle example

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

JavaScript不删除类

4 个答案: