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');
});

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

3 个答案: