jquery Скрыть меню при повторном клике

217

24 июня 2018, 09:30

Друзья, подскажите как сделать, всю голову сломал) Хочу реализовать выпадающее меню по клику. Всё что задумал вроде получилось, но надо еще сделать так, чтобы при повторном клике по меню оно скрывалось, а не только по клику в свободной области документа. Пробовал использовать toggle(), но что то не вышло ничего. Сдается мне всё вообще по другому как то реализовывать надо...

var buttom = $('.navBarPunkts>ul>li'); 
	 
	buttom.click(function(e){ 
		e.preventDefault(); 
		$(this).children('ul').removeClass('hidden_test'); 
		$(this).addClass('active'); 
	}); 
	 
	 
	$(document).mouseup(function () { 
		$('.active').removeClass('active'); 
		$('.ul_hidden_menu').addClass('hidden_test'); 
	});

*{ 
	margin:0; 
} 
.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
body { 
    font-family: ArialNarrowRegular, Arial, Helvetica, sans-serif; 
    word-wrap: break-word; 
    word-break: break-word; 
} 
.navBar{ 
	background:#4a4a4a; 
	min-height:50px; 
} 
.navBarPunkts{ 
	//outline:1px solid #FFF; 
	margin:0 auto; 
	min-width:768px; 
	width:65%; 
	min-height:50px; 
	display:block; 
} 
.navBarPunkts ul{ 
	overflow: hidden; 
} 
.navBarPunkts > ul > li{ 
	float:left; 
	list-style-type: none; 
	color:#FFF; 
	display:block; 
} 
.navBarPunkts ul li a{ 
	text-decoration: none; 
	color:#FFF; 
	display: block; 
	height:50px; 
	line-height:50px; 
	//margin-left:30px; 
	font-size: 12px; 
	cursor: pointer; 
	padding:0 20px; 
} 
.navBarPunkts > ul > li > a:hover{ 
	text-decoration: none; 
	color:#BDBDBD; 
	display: block; 
	height:50px; 
	line-height:50px; 
	//margin-left:30px; 
	font-size: 12px; 
} 
.caret{ 
	display: inline-block; 
    margin-left: 4px; 
	font-size:8px; 
     
} 
.ul_hidden_menu{ 
	position: absolute; 
    z-index: 598; 
    max-width: 20%; 
    min-width: 10%; 
	padding:0; 
} 
.hidden_test{ 
	display:none; 
} 
.ul_hidden_menu li a{ 
	//float:left; 
	list-style:none; 
	background:#777; 
	text-align:center; 
} 
.ul_hidden_menu li a:hover{ 
	//float:left; 
	list-style:none; 
	background:#7ca924; 
	text-align:center; 
	color:#FFF; 
} 
#add_obyavlenie{ 
	float:right; 
	list-style-type: none; 
	color:#FFF; 
	background:#7ca924; 
} 
.navBarPunkts ul li.active { 
  background: #777; 
} 
.content{ 
	outline:1px solid red; 
	width:65%; 
	min-height:50px; 
	margin:30px auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="ru-RU"> 
	<head> 
		<title>Площадка</title> 
		<link rel='stylesheet' href='/css/main.css' type='text/css'> 
		<script type="text/javascript" src="/js/jquery.js"></script> 
		<script type="text/javascript" src="/js/myscripts.js"></script> 
	</head> 
	 
	<body> 
		<div class="clearfix"> 
			<nav class="navBar"> 
				<div class="navBarPunkts"> 
					<ul> 
						<li><a href="/">Главная</a></li> 
						<li><a href="/">Вход и Регистрация</a></li> 
						<li class="noActive"><a href="/">Объявления<span class="caret">	&#9660;</span></a> 
							<ul class="ul_hidden_menu hidden_test"> 
								<li><a href="#">Пункт 1</a></li> 
								<li><a href="#">Пункт 2</a></li> 
								<li><a href="#">Пункт 3</a></li> 
								<li><a href="#">Пункт 4</a></li> 
								<li><a href="#">ПроверкаДлинныйТекст</a></li> 
							</ul> 
						</li> 
						<li><a href="/">Информация<span class="caret">	&#9660;</span></a> 
							<ul class="ul_hidden_menu hidden_test"> 
								<li><a href="#">Пункт 1</a></li> 
								<li><a href="#">Пункт 2</a></li> 
								<li><a href="#">Пункт 3</a></li> 
								<li><a href="#">Пункт 4</a></li> 
								<li><a href="#">ПроверкаДлинныйТекст</a></li> 
							</ul> 
						</li> 
						<li><a href="/">Услуги<span class="caret">	&#9660;</span></a> 
							<ul class="ul_hidden_menu hidden_test"> 
								<li><a href="#">Пункт 1</a></li> 
								<li><a href="#">Пункт 2</a></li> 
								<li><a href="#">Пункт 3</a></li> 
								<li><a href="#">Пункт 4</a></li> 
								<li><a href="#">ПроверкаДлинныйТекст</a></li> 
							</ul> 
						</li> 
						<li><a href="/">Меню<span class="caret">	&#9660;</span></a> 
							<ul class="ul_hidden_menu hidden_test"> 
								<li><a href="#">Пункт 1</a></li> 
								<li><a href="#">Пункт 2</a></li> 
								<li><a href="#">Пункт 3</a></li> 
								<li><a href="#">Пункт 4</a></li> 
								<li><a href="#">ПроверкаДлинныйТекст</a></li> 
							</ul> 
						</li> 
						<li><a>Советы<span class="caret">	&#9660;</span></a> 
							<ul class="ul_hidden_menu hidden_test"> 
								<li><a href="#">Пункт 1</a></li> 
								<li><a href="#">Пункт 2</a></li> 
								<li><a href="#">Пункт 3</a></li> 
								<li><a href="#">Пункт 4</a></li> 
								<li><a href="#">ПроверкаДлинныйТекст</a></li> 
							</ul> 
						</li> 
						<li id="add_obyavlenie"><a href="/">Добавить объявление</a></li> 
					</ul> 
				</div> 
			</nav> 
		</div> 
		 
		<div class="content"> 
			 
		</div> 
		 
		</body> 
</html>