Я пытаюсь применить решение, найденное ниже, к моему дизайну, но я просто не могу заставить мое меню закрыться. Я новичок в этой кодировке, поэтому любая помощь будет оценена по достоинству.Закрытие меню, когда я нажимаю на него, используя JQuery
Это исправление я пытался обратиться к моему коду:
Click outside menu to close in jquery
Мой код:
<body>
<div class="container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li id="clickMe1"><a href="#s1">Menu 1</a>
<span id="s1"></span>
<ul class="subs subhide1">
<li><a href="#">Header a</a>
<ul>
<li><a href="http://www.yahoo.com" target="blank">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
<li><a href="#">Header b</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
</ul>
</li>
<li id="clickMe2" ><a href="#s2">Menu 2</a>
<span id="s2"></span>
<ul class="subs subhide2">
<li ><a href="#">Header c</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
<li><a href="#">Header d</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
</ul>
</li>
<li ><a href="#s3">Menu 3</a>
<span id="s3"></span>
<ul class="subs">
<li><a href="#">Header e</a>
<ul>
<li><a href="#">Subsdfa</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
<li><a href="#">Header f</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
<li><a href="#">Header g</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<!-- <li><a href="#">Menu 5</a></li> reserved for possible use later-->
</ul>
</div>
<script type="text/javascript">
$('#nav > li').click(function() {
$(this).siblings().find('ul.subs').hide();
$(this).find('ul.subs').toggle();
});
</script>
<script type="text/javascript">
$('html').click(function() {
//Hide the menus if visible
});
$('.container').click(function(event){
event.stopPropagation();
});
</script>
</body>
Если один или несколько из приведенных ниже ответов полезны, вы бы любезно принять лучший ответ, нажав на флажок слева от него? Это также даст вам некоторые очки репутации. – m59