jQuery combine（ 'click'）とif文

Question

私は再利用できるサイドナビゲーションを開発中で、いくつかのデータ属性を実装したいと思います。 jQueryのトリガー機能が必要な場合や、data-open="true"のサイドナビゲーションがデフォルトで開いている場合は、イベントとif文を組み合わせることは可能ですか？ポイントは、open属性のすべてのコードを書き換えたくないということです。たぶん、ページがロードされる前にonClickをトリガーするものは、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();