Question

我正在开发侧导航，我将能够重复使用，并且我想实现一些数据属性。是否可以在点击或A<B>::Inner上以jQuery触发函数的方式组合on（'click'）事件和if语句，以便默认打开侧面导航。关键是我不想重写open属性的所有代码。如果A<B>::Inner，可能会在加载页面之前触发onClick一次。对不起英文不好

这是我的HTML：

data-open="true"

这是JavaScript

data-open="true"

这是CodePen： https://codepen.io/Klak031/pen/EXwdRw

Answer 1

将代码放入函数中，使用函数作为事件监听器的回调函数，并在加载时调用函数：

// Event listener
$('.side-toggle-button').on('click', slideToggleNav);

// Function itself
function slideToggleNav() {
    var push = $('.side-nav').data().push;
    var opacity = $('.side-nav').data().opacity;
    var open= $('.side-nav').data().open;

    $('.side-nav').toggleClass('side-nav-open');

    // Left Side Navigation
    if ($('.side-nav').hasClass('side-nav-left')){
        $(this).toggleClass('side-toggle-button-left');

        //Left Side Push Option
        if (push === true) {
            $('body').toggleClass('side-nav-push-right');
        }

    // Right Side Navigation
    } else {
        $(this).toggleClass('side-toggle-button-right');

        //Right Side Push Option
        if (push === true) {
            $('body').toggleClass('side-nav-push-left');
        }
    }

    // Opacity Option
    if (opacity === true) {
        $('body').toggleClass('side-nav-opacity');
    }
}

// Call to function
slideToggleNav();

jQuery结合（'click'）和if语句

1 个答案: