使用javascript中的togglebutton函数定位两个单独的链接时出现问题

时间:2019-07-02 02:54:00

标签: javascript jquery

我希望点击后在JavaScript函数中分别设置两个垂直滑出导航栏的两个单独链接。

我尝试将相同的切换按钮功能与两个类一起使用,这两个类对应于两个滑出式导航栏,但无济于事。

$(document).ready(function() {

    var $toggleButton = $('.toggle-button-work'),
        $menuWrap = $('.menu-wrap-work'),
        $toggleButton = $('.toggle-button-about'),
        $menuWrap = $('.menu-wrap-about');    

    // Slide-out Nav - LEFT - MY WORK

    $toggleButton.on('click', function() {
        $(this).toggleClass('button-open-work');
        $menuWrap.toggleClass('menu-show');
    });     

    // Slide-out Nav - RIGHT - ABOUT

    $toggleButton.on('click', function() {
        $(this).toggleClass('button-open-about');
        $menuWrap.toggleClass('menu-about');
    });

});

我希望由于我为每个切换按钮使用了单独的类,因此它应该可以工作。但是,它仅设置了其中一个链接或右侧滑出式导航链接。

1 个答案:

答案 0 :(得分:0)

为什么要重新分配元素选择?

var $toggleButton = $('.toggle-button-work'),
$menuWrap = $('.menu-wrap-work'),
$toggleButton = $('.toggle-button-about'),
$menuWrap = $('.menu-wrap-about');

您应该为不同的变量分配每个元素