[jQuery] ナビメニューの各項目にドロップダウンをつける。

ナビメニューの項目のドロップダウン表示を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件

自己解決

toggle()でばかりこだわっていましたが、toggle()での実装はやめて.hover()で、マウスが乗ったときに処理し、マウスが離れたときに、元にもどす処理に切り替えました。

<nav>
		<ul id="list">
			<li><a href="#">TEST</a></li>
			<li><a href="#">TEST</a></li>
			<li><a href="#">TEST</a></li>
		<li>

        <div class="child-menu">
		<a href="#">メニュー</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').hover( function(){
        $(this).find('ul').show();
	},function() {
        $(this).find('ul').hide();
    });
})();
</script>

投稿2017/07/18 12:43

xjaPANDA

総合スコア124