jQuery 组合 on('click') 和 if 语句

Question

我正在开发侧面导航，我将能够重复使用，我想实现一些数据属性。是否可以在("单击"(事件上结合使用('单击'(事件，如果我需要在单击时jQuery触发函数的方式或语句，或者如果data-open="true"，则默认情况下侧面导航。关键是我不想重写打开属性的所有代码。如果data-open="true"加载页面之前，可能会触发一次性的某些东西。对不起，英语不好

这是我的html：

<nav class="side-nav side-nav-right" data-push="true" data-open="true" data-opacity="true">
    <div class="side-toggle-button">
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
    </div>
</nav>

这是JavaScript

// Side Navigation
$('.side-toggle-button').on('click', function() {
    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');
    }
});
// Side Navigation End

这是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();