在div中为多个手风琴添加mouseleave功能？

Question

我有一个由手风琴组成的菜单。原因是我想要一个水平的，所以我为4种不同的手风琴添加了4次相同的div，并将它们水平对齐。

目前，它在鼠标点击时打开。当我将其更改为悬停时，它会打开;然而，当我将光标移动到子菜单时，它会缩回子菜单。因此无法点击子菜单。

任何帮助将不胜感激。我已经尝试在jquery中添加一行，当它离开div时取消，但它不起作用。

CODE

＆＃13;

＆＃13;

$(document).ready(function(){

$('#cssmenu > ul > li > a').click(function() {

var checkElement = $(this).next();

$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');

if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}

if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}

if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
$("#cssmenu").mouseleave(close_cssmenu); //Line which I tried but did not work
});

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
position: relative;
}


#cssmenu a {
line-height: 1.3;
}

.glyphicon {
font-size: 14px;
}

#cssmenu {
float: right;
display:inline-block;
width: auto; height: auto;
border-bottom: 4px solid #656659;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

 .img2 {

padding: 6px;

}


#cssmenu > ul > li {
background: #e94f31;
background: -moz-linear-gradient(#e94f31 0%, #d13516 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516));
background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%);
background: linear-gradient(#e94f31 0%, #d13516 100%);
}
#cssmenu > ul > li:hover {
background: #e84323;
background: -moz-linear-gradient(#e84323 0%, #c33115 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115));
background: -webkit-linear-gradient(#e84323 0%, #c33115 100%);
background: linear-gradient(#e84323 0%, #c33115 100%);
}
#cssmenu > ul > li > a {
font-size: .9em;
display: block;
background: url(menu_images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #ba2f14;
border-top: none;
text-shadow: 0 -1px 1px #751d0c;
}
#cssmenu > ul > li > a > span {
display:block;
padding: 12px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.has-sub > a span {
background: url(menu_images/icon_plus.png) 96% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(menu_images/icon_minus.png) 96% center no-repeat;
}

/* Sub menu */
#cssmenu ul ul {
display: none;
background: #fff;
border-right: 1px solid #a2a194;
border-left: 1px solid #a2a194;
}
#cssmenu ul ul li {
padding: 0;
border-bottom: 1px solid #d4d4d4;
border-top: none;
background: #f7f7f7;
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#cssmenu ul ul li:last-child {
border-bottom: none;
}
#cssmenu ul ul a {
padding: 10px 10px 10px 25px;
display: block;
color: #676767;
font-size: .8em;
font-weight: normal;
}
#cssmenu ul ul a:before {
content: '\00BB';
position: absolute;
left: 10px;
color: #e94f31;
}
#cssmenu ul ul a:hover {
color: #e94f31;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/house-24.png" alt="home" />Welcome back, John Smith</a>
<ul>
<li style="list-style:none;"><a href="#">Home</a></li>
<li style="list-style:none;"><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;">

<a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/paper-24.png" alt="order-history" />History</a>
<ul>
<li style="list-style:none;"><a href="#">Order History</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/businessman-24.png" alt="profile" />Profile</a>
<ul>
<li style="list-style:none;"><a href="#">Edit Profile</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/purchase-order-24.png" alt="home" />Load Request</a>

<ul>
<li style="list-style:none;"><a href="#">Airport</a></li>
<li style="list-style:none;"><a href="#">City</a></li>

<li style="list-style:none;"><a href="#">Seaport</a></li>
</ul>
</li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

备注我已经在index.php中包含了jquery库。我将删除php。只有那里才能获得当前登录用户的用户名，该用户目前正在使用。

Answer 1

看看这个。您希望将事件绑定到一个元素，该元素将包含mouseenter上的整个子菜单，以便它不会在子菜单中触发离开。这就是为什么我在这里使用<ul>而不是<a>的原因。当您离开<a>菜单关闭但<ul>包含子菜单时，它不会。希望这会有所帮助。

＆＃13;

＆＃13;

$(document).ready(function(){

$('#cssmenu > ul').mouseenter(function() {

    var checkElement = $(this).find('a').next();
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');

    $(this).closest('li').removeClass('active');
    checkElement.stop().slideDown('normal');
 
}).mouseleave(function(){
   $(this).find('a').next().stop().slideUp('normal');
});

});

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
position: relative;
}


#cssmenu a {
line-height: 1.3;
}

.glyphicon {
font-size: 14px;
}

#cssmenu {
float: right;
display:inline-block;
width: auto; height: auto;
border-bottom: 4px solid #656659;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

 .img2 {

padding: 6px;

}


#cssmenu > ul > li {
background: #e94f31;
background: -moz-linear-gradient(#e94f31 0%, #d13516 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516));
background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%);
background: linear-gradient(#e94f31 0%, #d13516 100%);
}
#cssmenu > ul > li:hover {
background: #e84323;
background: -moz-linear-gradient(#e84323 0%, #c33115 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115));
background: -webkit-linear-gradient(#e84323 0%, #c33115 100%);
background: linear-gradient(#e84323 0%, #c33115 100%);
}
#cssmenu > ul > li > a {
font-size: .9em;
display: block;
background: url(menu_images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #ba2f14;
border-top: none;
text-shadow: 0 -1px 1px #751d0c;
}
#cssmenu > ul > li > a > span {
display:block;
padding: 12px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.has-sub > a span {
background: url(menu_images/icon_plus.png) 96% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(menu_images/icon_minus.png) 96% center no-repeat;
}

/* Sub menu */
#cssmenu ul ul {
display: none;
background: #fff;
border-right: 1px solid #a2a194;
border-left: 1px solid #a2a194;
}
#cssmenu ul ul li {
padding: 0;
border-bottom: 1px solid #d4d4d4;
border-top: none;
background: #f7f7f7;
background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#cssmenu ul ul li:last-child {
border-bottom: none;
}
#cssmenu ul ul a {
padding: 10px 10px 10px 25px;
display: block;
color: #676767;
font-size: .8em;
font-weight: normal;
}
#cssmenu ul ul a:before {
content: '\00BB';
position: absolute;
left: 10px;
color: #e94f31;
}
#cssmenu ul ul a:hover {
color: #e94f31;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/house-24.png" alt="home" />Welcome back, John Smith</a>
<ul>
<li style="list-style:none;"><a href="#">Home</a></li>
<li style="list-style:none;"><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;">

<a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/paper-24.png" alt="order-history" />History</a>
<ul>
<li style="list-style:none;"><a href="#">Order History</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/businessman-24.png" alt="profile" />Profile</a>
<ul>
<li style="list-style:none;"><a href="#">Edit Profile</a></li>
</ul>
</li>
</ul>
</div>
<div id="cssmenu">
<ul>
<li style="list-style:none;"><a style="font-size: 12px;padding-right: 8px; padding-top: 2px;" href="#">

<img class="img2" src="http://www.arabiantcl.com/images/icons/purchase-order-24.png" alt="home" />Load Request</a>

<ul>
<li style="list-style:none;"><a href="#">Airport</a></li>
<li style="list-style:none;"><a href="#">City</a></li>

<li style="list-style:none;"><a href="#">Seaport</a></li>
</ul>
</li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;