ナビメニューの項目のドロップダウン表示をjqeruyで作っています。
.toggle()を使って、<a href="#" class="child-menu">メニュー</a> をクリックすると、表示・非表示に切り替わるようにはできました。 しかし、表示したものを非表示にする際に、もう一度項目部分を押さないといけないので、非表示にする際は、項目と関係のない場所をクリックしても、非表示になるようにしたいと思います。どのうよにすればよいでしょうか? そもそもtoggle()でやること自体、無理なのではないかとおもい、考え中なのですが、進まなくなってしましました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <nav> <ul id="list"> <li><a href="#">TEST</a></li> <li><a href="#">TEST</a></li> <li><a href="#">TEST</a></li> <li> <a href="#" class="child-menu">メニュー</a> <ul id="child" style="display: none"> <li><a href="#">テスト</a></li> <li><a href="#">テスト</a></li> <li><a href="#">テスト</a></li> </ul> </li> </ul> </nav> <script> (function() { $('.child-menu').on('click', function(e){ $(this).next().toggle('slow'); }); })(); </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。