Question

我希望在用户特别加入＆＃34; li＆＃34;只要。我设置了CSS并将display none设置为第二个菜单。现在我希望在关于鼠标悬停的事件（或对于那个事实点击）上显示它时尊重li。

下面是我的html + javascript：

<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/main.css" />

<title>CSS MENU BAR</title>


<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
  $("#homeButton").mouseover(function(){
      console.log("in function");
      $(".secondMenu").css("display","block");
  });
});
</script>



</head>
<body>

<div class="container">

<ul>
<li>Home</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>

<div class="secondMenu">
<ul>
<li id="homeButton">Home</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>
</body>
</html>

下面是我的CSS（请原谅许多无用的属性，我正处于测试阶段）

.container
{
    background-color:#4B46B3;
    height:40px;
    width:60%;
    float:left;
    border:5px;
    margin-left:20%;
    margin-right:20%;
    border: 2px solid #3C3B5C;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding : 0px;
    margin-top:0px;
    margin-bottom:0px;
}

.secondMenu{
    display:none;
    background-color:orange;
    height:40px;
    width:60%;
    float:left;
    border:5px;
    margin-left:20%;
    margin-right:20%;
    border: 2px solid #3C3B5C;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding : 0px;
    margin-top:0px;
    margin-bottom:0px;


}

.container ul li{

     list-style-type: none;
     float:left;
     position:relative;
     height:100%;
    /* border: 2px solid #3C3B5C; */
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;*/
     margin-right:0.2%;
     line-height:40px;
     padding : 0px;
     text-align:center;
     display: block;    
     padding-left:2%;
     padding-right:2%;
     border-right: 2px solid #3C3B5C;
     color:white;   
     font-size:90%;
     text-shadow: -2px -1px .1px rgba(150, 150, 150, .5);


}

.secondMenu ul li{
     list-style-type: none;
     float:left;
     border-right:1px solid black;
     line-height:40px;
     padding:0% 1%;
     color:white;
     text-shadow: -2px -1px .1px rgba(150, 150, 150, .5);
     background-color:#4B46B3;
     margin-right:1px;



}


.container ul {
    margin:0px;
    padding:0px;
    padding-left:0.2%;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
     border-radius: 1px;
     white-space:nowrap;
    margin-top:0px;
    margin-bottom:0px;

}

.secondMenu ul{
    margin:0px;
    padding:0px;

}

我的事件函数被调用。我尝试使用debugger和console.log。

Answer 1

我认为如果你有很多secondMenu，这种方法也可以使用。

$(function(){
      $(".secondMenu").on('mouseover',function(){
          $(this).show();
      }).on('mouseout',function(){
          $(this).hide();
      });
});

Answer 2

您的<li id="homeButton">Home</li>应位于上层

<div class="container">
        <ul>
            <li id="homeButton">Home</li>
            <li>Wiki</li>
            <li>Jira</li>
            <li>Projects/Releases</li>
            <li>Documentation</li>
            <li>Tools/Environment</li>
            <li>Help/Support</li>
        </ul>
</div>

http://jsfiddle.net/ZyWbs/

Answer 3

首先你需要添加id＆＃34; homeButton＆＃34;到＆lt; li>元件。试试这个：

$(function(){
      $("#homeButton").mouseover(function(){
          $(".secondMenu").show();
      }).mouseout(function(){
          $(".secondMenu").hide();
      });
});

Answer 4

由于secondMenu的显示属性是＆＃34; none＆＃34;，＆＃34; homeButton＆＃34;的鼠标悬停事件因为homeButton位于secondMenu里面，它将不会触发，它将继承其父级的display属性。将homeButton移到secondMenu之外以使其正常工作。

jQuery事件没有绑定

4 个答案: