Select body content except for certain elements using jQuery?

Question

Select body content except for certain elements using jQuery?

Navigation

#1 by (0 votes)

0

Again here. My menu can now go down and look very good. This time what I need is that when the NO mouse is in any part of the menu, it disappears, that is, when the user takes the mouse to any other part of the page other than the menu , the menu should do a slide up . My problem is in the jQuery selector, which I can not tune.

$(document).ready(function() {
    
    $(".level1-option").hover(function(){
    	$(".sub-menu1-container").slideDown();
    });

    $("body div").not(".header-menu, .level1-option, .sub-menu1-container, .sub-menu1-img, .sub-menu1-options, .sub-menu2-options").mouseenter(function(){
    	$(".sub-menu1-container").slideUp();
    });

});

* {
	padding: 0;
	margin: 0;
}

.header {
	background: white;
	height: 147px;
	box-shadow: 1px 1px 15px grey;
	position: relative;
	z-index: 100;
}

.header-menu {
	color: grey; 
	position: absolute; 
	right: 100px; 
	bottom: 20px;
}

.level1-option {
	padding: 0 10px;
	display: inline-block;
	color: grey;
}

.level1-option:hover {
	color: #e6b800;
	cursor: all-scroll;
}

.sub-menu1-container {
	margin: 0 5%;
	background: white;
	height: 337px;
	box-shadow: 1px 1px 15px #8f8a8a;
	position: relative;
	z-index: 99;
}

.sub-menu1-img {
	padding: 1% 10%;
	position: absolute;
}

.sub-menu1-options {
	box-shadow: 1px 1px 15px #8f8a8a;
	background: #e6e5e5;
	position: absolute; 
	left: 55%;
	height: 337px;
	width: 45%;
}

.sub-menu2-options {
	box-shadow: 1px 1px 15px #8f8a8a;
	background: #c1bebe;
	position: absolute; 
	left: 70%;
	height: 337px;
	width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="header">
    <div class="header-menu">
      <ul style="list-style: none;">
        <li class="level1-option">option 1</li>
        <li class="level1-option">option 2</li>
        <li class="level1-option">option 3</li>
        <li class="level1-option">option 4</li>
        <li class="level1-option">option 5</li>
        <li class="level1-option">option 6</li>
      </ul>
    </div>
</div>

<div class="sub-menu1-container" hidden>
  <div class="sub-menu1-img">
    <img src="http://www.ikea.com/PIAimages/0324126_PE517034_S5.JPG" style="width: 300px; height: 320px;">
  </div>
  <div class="sub-menu1-options">

  </div>
  <div class="sub-menu2-options">

  </div>
</div>
  
</body>
</html>

jquery html

asked by Kenny Barrera 05.10.2017 в 23:11

source

1 answer

Do you know the cause of this error? Android System WebView updated does not allow redirection

score 0 · Answer 1

What you can do is use the event mouseover of body and avoid the propagation of this event in the elements where you do not want the menu to be folded:

$(document).ready(function() {
    
    $(".level1-option").hover(function(){
    	$(".sub-menu1-container").slideDown();
    });
    $("body").mouseover(function() {$(".sub-menu1-container").slideUp(); });
    $(".header-menu").mouseover(function(e) { e.stopPropagation(); });

});

* {
	padding: 0;
	margin: 0;
}

.header {
	background: white;
	height: 147px;
	box-shadow: 1px 1px 15px grey;
	position: relative;
	z-index: 100;
}

.header-menu {
	color: grey; 
	position: absolute; 
	right: 100px; 
	bottom: 20px;
}

.level1-option {
	padding: 0 10px;
	display: inline-block;
	color: grey;
}

.level1-option:hover {
	color: #e6b800;
	cursor: all-scroll;
}

.sub-menu1-container {
	margin: 0 5%;
	background: white;
	height: 337px;
	box-shadow: 1px 1px 15px #8f8a8a;
	position: relative;
	z-index: 99;
}

.sub-menu1-img {
	padding: 1% 10%;
	position: absolute;
}

.sub-menu1-options {
	box-shadow: 1px 1px 15px #8f8a8a;
	background: #e6e5e5;
	position: absolute; 
	left: 55%;
	height: 337px;
	width: 45%;
}

.sub-menu2-options {
	box-shadow: 1px 1px 15px #8f8a8a;
	background: #c1bebe;
	position: absolute; 
	left: 70%;
	height: 337px;
	width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="header">
    <div class="header-menu">
      <ul style="list-style: none;">
        <li class="level1-option">option 1</li>
        <li class="level1-option">option 2</li>
        <li class="level1-option">option 3</li>
        <li class="level1-option">option 4</li>
        <li class="level1-option">option 5</li>
        <li class="level1-option">option 6</li>
      </ul>
    </div>
</div>

<div class="sub-menu1-container" hidden>
  <div class="sub-menu1-img">
    <img src="http://www.ikea.com/PIAimages/0324126_PE517034_S5.JPG" style="width: 300px; height: 320px;">
  </div>
  <div class="sub-menu1-options">

  </div>
  <div class="sub-menu2-options">

  </div>
</div>
  
</body>
</html>