绑定mouseleave函数中的另一个元素

时间：2015-06-03 07:24:18

标签： javascript jquery

我创建了一个下拉菜单，下面是我的代码段。问题是每当我点击触发它的链接后，我试图进入下拉部分（具有dropdown_menu类的菜单）菜单，它将会滑动，因为它也不会因为.has_dp元素也在里面， 有任何想法吗？我想知道最好的解决方案是将.dropdown_menu元素与.has_dp的mouseleave事件绑定，以便.dropdown_menu只有在.has_dp和.dropdown_menu上没有光标时才会滑动，这可能吗？ 

$(document).ready(function(){
    //main declarations
    $(".thehide").hide();
   //dropdown menu
    $(".has_dp").click(function(){
       $(".dropdown_menu", this).slideDown(); 
    }).mouseout(function(){
       $(".dropdown_menu", this).slideUp(); 
    });
});
/* navigation */
#topnav{
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  
}
#topnav li{
    float: left;
    list-style: none;
}
#topnav li a{
    display: block;
    padding: 5px 8px;
    color: red;
    text-transform: uppercase;
}
#topnav li a span{
    float: left;
    display: block;
}
#topnav li a span:first-child{
    margin-right: 3px;
}
#topnav li a span:last-child{
    padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
    color: blue;
}
/* dropdown */
.dropdown_menu{
    z-index: 999;
    position: absolute;
    background: #263238;
    padding: 10px;
    margin-top: 15px;
}
.dropdown_menu li{
    clear: both;
    float: none;
}
.dropdown_menu a{
    clear: both;
    float: none;
    display: block;
    padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="nav extend clear" id="topnav">
                        <li><a href="index.html" title="home" class="active_menu">Home</a></li>
                        <li class="has_dp">
                            <a href="#" title="Company" class="extend clear"><span>Company</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">Company dropdown menu 1</a></li>
                                <li><a href="#">Company dropdown menu 2</a></li>
                                <li><a href="#">Company dropdown menu 3</a></li>
                                <li><a href="#">Company dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="HR"><span>HR</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">HR dropdown menu 1</a></li>
                                <li><a href="#">HR dropdown menu 2</a></li>
                                <li><a href="#">HR dropdown menu 3</a></li>
                                <li><a href="#">HR dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html" title="#">Assets</a></li>
                        <li><a href="index.html" title="#">Employees</a></li>
                        <li class="has_dp">
                            <a href="#" title="Expenses"><span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">expenses dropdown menu 1</a></li>
                                <li><a href="#">expenses dropdown menu 2</a></li>
                                <li><a href="#">expenses dropdown menu 3</a></li>
                                <li><a href="#">expenses dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="HR"><span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">PERFORMANCE dropdown menu 1</a></li>
                                <li><a href="#">PERFOMANCE dropdown menu 2</a></li>
                                <li><a href="#">PERFORMANCE dropdown menu 3</a></li>
                                <li><a href="#">PERFORMANCE dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="Recruitment"><span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">RECRUITMENT dropdown menu 1</a></li>
                                <li><a href="#">RECRUITMENT dropdown menu 2</a></li>
                                <li><a href="#">RECRUITMENT dropdown menu 3</a></li>
                                <li><a href="#">RECRUITMENT dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html" title="#">reporting</a></li>
                        <li class="has_dp">
                            <a href="#" title="self service"><span>self service</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">SELF SERVICE dropdown menu 1</a></li>
                                <li><a href="#">SELF SERVICE dropdown menu 2</a></li>
                                <li><a href="#">SELF SERVICE dropdown menu 3</a></li>
                                <li><a href="#">SELF SERVICE dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html" title="#">timesheets</a></li>
                        <li><a href="index.html" title="#">Timeoff</a></li>
                        <li class="has_dp">
                            <a href="#" title="training"><span>training</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">training dropdown menu 1</a></li>
                                <li><a href="#">training dropdown menu 2</a></li>
                                <li><a href="#">training dropdown menu 3</a></li>
                                <li><a href="#">training dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="more"><span>more</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">more dropdown menu 1</a></li>
                                <li><a href="#">more dropdown menu 2</a></li>
                                <li><a href="#">more dropdown menu 3</a></li>
                                <li><a href="#">more dropdown menu 4</a></li>
                            </ul>
                        </li>
                    </ul>

1 个答案:

答案 0 :(得分：0)

问题是mouseout事件的性质是冒泡的。

您需要使用mouseleave代替mouseout

＆＃13;
＆＃13; 
$(document).ready(function() {
  //main declarations
  $(".thehide").hide();
  //dropdown menu
  $(".has_dp").click(function() {
    $(".dropdown_menu", this).slideDown();
  }).mouseleave(function() {
    $(".dropdown_menu", this).slideUp();
  });
});
＆＃13; 
/* navigation */

#topnav {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
#topnav li {
  float: left;
  list-style: none;
}
#topnav li a {
  display: block;
  padding: 5px 8px;
  color: red;
  text-transform: uppercase;
}
#topnav li a span {
  float: left;
  display: block;
}
#topnav li a span:first-child {
  margin-right: 3px;
}
#topnav li a span:last-child {
  padding-top: 2px;
}
#topnav li a.active_menu,
#topnav li a:active,
#topnav li a:hover {
  color: blue;
}
/* dropdown */

.dropdown_menu {
  z-index: 999;
  position: absolute;
  background: #263238;
  padding: 10px;
  margin-top: 15px;
}
.dropdown_menu li {
  clear: both;
  float: none;
}
.dropdown_menu a {
  clear: both;
  float: none;
  display: block;
  padding: 5px 8px;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="nav extend clear" id="topnav">
                        <li><a href="index.html" title="home" class="active_menu">Home</a></li>
                        <li class="has_dp">
                            <a href="#" title="Company" class="extend clear"><span>Company</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">Company dropdown menu 1</a></li>
                                <li><a href="#">Company dropdown menu 2</a></li>
                                <li><a href="#">Company dropdown menu 3</a></li>
                                <li><a href="#">Company dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="HR"><span>HR</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">HR dropdown menu 1</a></li>
                                <li><a href="#">HR dropdown menu 2</a></li>
                                <li><a href="#">HR dropdown menu 3</a></li>
                                <li><a href="#">HR dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html" title="#">Assets</a></li>
                        <li><a href="index.html" title="#">Employees</a></li>
                        <li class="has_dp">
                            <a href="#" title="Expenses"><span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">expenses dropdown menu 1</a></li>
                                <li><a href="#">expenses dropdown menu 2</a></li>
                                <li><a href="#">expenses dropdown menu 3</a></li>
                                <li><a href="#">expenses dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="HR"><span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">PERFORMANCE dropdown menu 1</a></li>
                                <li><a href="#">PERFOMANCE dropdown menu 2</a></li>
                                <li><a href="#">PERFORMANCE dropdown menu 3</a></li>
                                <li><a href="#">PERFORMANCE dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="Recruitment"><span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">RECRUITMENT dropdown menu 1</a></li>
                                <li><a href="#">RECRUITMENT dropdown menu 2</a></li>
                                <li><a href="#">RECRUITMENT dropdown menu 3</a></li>
                                <li><a href="#">RECRUITMENT dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html" title="#">reporting</a></li>
                        <li class="has_dp">
                            <a href="#" title="self service"><span>self service</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">SELF SERVICE dropdown menu 1</a></li>
                                <li><a href="#">SELF SERVICE dropdown menu 2</a></li>
                                <li><a href="#">SELF SERVICE dropdown menu 3</a></li>
                                <li><a href="#">SELF SERVICE dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html" title="#">timesheets</a></li>
                        <li><a href="index.html" title="#">Timeoff</a></li>
                        <li class="has_dp">
                            <a href="#" title="training"><span>training</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">training dropdown menu 1</a></li>
                                <li><a href="#">training dropdown menu 2</a></li>
                                <li><a href="#">training dropdown menu 3</a></li>
                                <li><a href="#">training dropdown menu 4</a></li>
                            </ul>
                        </li>
                        <li class="has_dp">
                            <a href="#" title="more"><span>more</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">more dropdown menu 1</a></li>
                                <li><a href="#">more dropdown menu 2</a></li>
                                <li><a href="#">more dropdown menu 3</a></li>
                                <li><a href="#">more dropdown menu 4</a></li>
                            </ul>
                        </li>
                    </ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题