1

Необходимо,чтобы меню закрывалось при клике вне его и вне кнопки, при помощи которой вызвалось это меню. Нужно использовать JQuery.

function hideMenu1() {
  $('.menu_dropdown1').slideUp(700);
}
function showMenu1() {
  $('.menu_dropdown1').slideDown(700);
}
$(document).ready(function() {
	$(".menu_element1").on("mouseover", showMenu1);
  $("#dr1").on("mouseover", showMenu1);
  $(".menu_dropdown1").on(" mouseleave", hideMenu1);

  	$(".menu_element2").on("mouseover", showMenu2);
  $("#dr2").on("mouseover", showMenu2);
  $(".menu_dropdown2").on(" mouseleave", hideMenu2);

  	$(".menu_element3").on("mouseover", showMenu3);
  $("#dr3").on("mouseover", showMenu3);
  $(".menu_dropdown3").on(" mouseleave", hideMenu3);

  	$(".menu_element4").on("mouseover", showMenu4);
  $("#dr4").on("mouseover", showMenu4);
  $(".menu_dropdown4").on(" mouseleave", hideMenu4);
});



function hideMenu2() {
  $('.menu_dropdown2').slideUp(700);
}
function showMenu2() {
  $('.menu_dropdown2').slideDown(700);
}

function hideMenu3() {
  $('.menu_dropdown3').slideUp(700);
}
function showMenu3() {
  $('.menu_dropdown3').slideDown(700);
}

function hideMenu4() {
  $('.menu_dropdown4').slideUp(700);
}
function showMenu4() {
  $('.menu_dropdown4').slideDown(700);
}
a{
	text-decoration: none;
	
}
body{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: -2px;
	background-color:#DCD8CF;
}
.header{
	display: flex;
	/*padding-top: 40px;*/
	background-color: #282827;
	height: 100px;
}
.menu_list{
	margin-top: 0px;
	display: flex;
	list-style: none;
	margin-left: 25px;
}
.menu_element1,.menu_element2,.menu_element3,.menu_element4{
	justify-content: center;
	align-items:   center;
	display: flex;
	width: 140px;
	height: 100px;
	margin-left: 100px;
	border-left: 3px solid #E25D33;
	border-right: 3px solid	#E25D33;
}
.menu_element1:hover,.menu_element2:hover,.menu_element3:hover,.menu_element4:hover{
border-left: 3px solid #E25D33;
	border-right: 3px solid	#E25D33;
	background-color: #E25D33;
	color: #282827;
	transition: 0.4s;
	position: relative;
}
#menu_element1:hover,#menu_element2:hover,#menu_element3:hover,#menu_element4:hover a{
color: #282827;
transition: 0.4s;
}
#menu_element1,#menu_element2,#menu_element3,#menu_element4 a{
	color: #E25D33;
}
.logo{
	margin-top: 20px;
	margin-left: 80px;
	
}

.icon-phonegap-seeklogocom, .logo{
	font-size: 50px;
	height: 20px;
	color: #E25D33;
	width: 20px;
}
/*DROPED MENU*/

.menu_element1,.menu_element2,.menu_element3,.menu_element4 {
  width: 200px;
  position: relative;
}

.menu_dropdown1,.menu_dropdown2,.menu_dropdown3,.menu_dropdown4 {
	display: none;	
	width: 300px;
	position: absolute;
 margin-top: 60px;
  border-bottom: 2px solid gold;
  border-top: 2px solid gold;
  border-left: 2px solid #ADA2F6;
  border-right: 2px solid #ADA2F6;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
 
}



#dr1,#dr2,#dr3,#dr4 {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
  padding: 0 5px;
  height: 30px;
  line-height: 30px;
  width: 60px;
  text-transform: uppercase;
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
		
		<div class="menu">
			<ul class="menu_list">
				<li class="menu_element1" ><a id="dr1"  href="">Winter</a></li><div class="menu_dropdown1">
				    <p>Games</p>
				    <p>Programs</p>
				    <p>Soft</p>
				    <p>Sale</p>
				  </div>
				<li class="menu_element2"><a id="dr2" href="">Spring</a><div class="menu_dropdown2">
				    <p>Games</p>
				    <p>Programs</p>
				    <p>Soft</p>
				    <p>Sale</p>
				  </div></li>
				<li class="menu_element3" ><a id="dr3"  href="">Summer</a><div class="menu_dropdown3">
				    <p>Games</p>
				    <p>Programs</p>
				    <p>Soft</p>
				    <p>Sale</p>
				  </div></li>
				<li  class="menu_element4"><a id="dr4" href="">Autumn</a><div class="menu_dropdown4">
				    <p>Games</p>
				    <p>Programs</p>
				    <p>Soft</p>
				    <p>Sale</p>
				  </div></li>
			</ul>
		</div>
	</div>

1 ответ 1

1

Есть такой трюк с отлавливанием события на документе и проверкой target у события:

$(document).mouseup(function (e) {
    var container = $('.menu_dropdown1');
    if(e.target != container[0] && !container.has(e.target).length) {
        container.hide("fast");
    }
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.