如何在JS中的类之间切换

Question

我是JS的新手，我正在尝试解决一些菜单问题。如果我点击div "work"，菜单"work“打开。如果我再点击一次就会关闭。"about“也是如此。

代码是这样的：

$(function () {
    $('#work').on('click', function (){
        $('.view').toggleClass('openwork');
    })
});


$(function () {
    $('#about').on('click', function (){
        $('.about').toggleClass('openabout');
    })
});

一切都很好，但现在我想切换打开的菜单(类)。如果我打开了"work“，当我打开"about”时，我想关闭它。

我试着对倒置类使用相同的函数，但它不起作用！

那么，我怎么才能让它工作呢？

Answer 1

我相信你正在寻找的东西是这样的：

$(function () {
    $('#work').on('click', function (){
        $('.view').toggleClass('openwork');
        $('.about').removeClass('openabout');
    })
});


$(function () {
    $('#about').on('click', function (){
        $('.about').toggleClass('openabout');
        $('.view').removeClass('openwork');
    })
});

当您单击其中一个菜单时，它将切换其状态(因此，如果关闭则打开，如果打开则关闭)，而另一个菜单将关闭或保持关闭状态。