Drupal 8で非表示になっているドロップダウンメニューが機能しない

Question

ユーザーがクリックしたときに表示されるドロップダウンメニューを作成しようとしていて、ユーザーが再度クリックするかメニューの外をクリックするかを閉じます。今私はこのコミュニティのおかげで作業スクリプトを持っています：http://jsfiddle.net/aL7Xe/1000/

私のdrupal 8サイトでこれを使用すると、何のアイデアはありませんか？使用

jQueryのイム：解決しよう事前

で

jQuery(document).ready(function() { 
    $('.topmenu').click(function(e){ 
    e.stopPropagation(); 
     $(this).find('.dropdown-menu').toggleClass('hide'); 
    }); 
    $('html').on('click', function(){ 
     $('.dropdown-menu').addClass('hide'); 
    }); 
}); 

ありがとう：

私はすでにそれを解決するには、私はそれが言ったコンソール@ Firefoxでデバッグ機能を見ていた時に判明しますエラー$は関数ではありません。私は最初の行に$を追加したので、このようになりましたjQuery(document).ready(function($) { そして、エラーはなくなり、うまくいきました。

Answer 1

Blomkfist174、

は、私はあなたのjQueryの作業だ嬉しいです。私はあなたが将来使用するためにこのコードを提供すると思った。コードが実行/ロードするときのためのコメントを参照してください：このように

(function (Drupal, $, window) { 

    // To understand behaviors, see https://www.drupal.org/node/2269515 
    Drupal.behaviors.themename = { 
    attach: function (context, settings) { 

     // Execute code once the DOM is ready. $(document).ready() not required within Drupal.behaviors. 

     //Code in your example would go here: 
     //---------------------------------------------- 
     $('.topmenu').click(function(e){ 
     e.stopPropagation(); 
     $(this).find('.dropdown-menu').toggleClass('hide'); 
     }); 
     $('html').on('click', function(){ 
     $('.dropdown-menu').addClass('hide'); 
     }); 
     //---------------------------------------------- 


     $(window).load(function() { 
     // Execute code once the window is fully loaded. 


     }); 

     $(window).scroll(function() { 
     // Execute code when the window scrolls. 


     }); 
    } 
    }; 
} (Drupal, jQuery, this)); 

コーディングあなたのテーマのJSは、あなたが他のDrupalのライブラリと対話できるようになります。たとえば、Ajaxの実行後にJSを実行できます。この行のテーマ名と一致するように、以下のコードを変更する必要があります：基本テーマからテーマを作成しました。このJSファイルは出発点として提供されました。私はgulpを使ってSource JSファイルを取得し、それらをuglify/minifyします。このアプローチを取ることで、いいフォーマットとコメントを持つソースファイルを得ることができますが、サイト上で使用されるファイルは最小限に抑えられます。

こちらがお役に立てば幸いです。