jquery - 点击功能上的Jquery将类添加到特定的div

Question

我有代码html

<div class="mobile"></div>
    <ul id="nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="work.php">Work</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</div>

我需要：单击将类添加到 ul

<div class="mobile"></div>
    <ul id="nav" class="visible">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="work.php">Work</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</div>

我试过了：

jQuery(document).ready(function() {
    jQuery('.mobile').click(function(){
        jQuery('#nav').removeClass('selected')
        jQuery('#nav').addClass('selected');
    });
});

当我第一次单击 js 添加所需的类时；但是当我再次单击它什么都不做时，它应该删除该类，但它不起作用。我怎样才能做到这一点？

有谁知道这个问题的答案？

Answer 1

使用toggleClass()：

jQuery(document).ready(function() {
    jQuery('.mobile').click(function(){
         jQuery('#nav').toggleClass('selected');
    });
});

虽然我不清楚你想要visible上课还是selected上课。

Answer 2

您在代码中所做的是每次单击时都会删除并添加类。因此，它在第一次点击后保持添加。您可以这样做以获得所需的行为：

$(document).ready(function() {
    $('.mobile').click(function(){
        $('#nav').toggleClass('selected');
    });
});

Answer 3

你究竟想要什么。如果你想添加班级，点击不止一次，班级就会被添加。如果您想在未添加类的情况下添加并在已为每次单击添加类的情况下删除，那么下面的代码应该可以工作。

$('.mobile').click(function() {
   $('#nav').toggleClass('selected');
});