javascript - 如何在悬停时显示子菜单

Question

我有一个带有子菜单(垂直)的菜单。我的第一个 li 在子菜单中处于事件状态。我的问题是，当我将鼠标悬停在另一个 li 中时，我在最后一个菜单中添加了子菜单。

我需要的是:

• 当我将鼠标悬停在菜单中时，仅获取当前 li 的子菜单
• 当我的光标未悬停在菜单中时，获取具有 on class 的默认子菜单

这是jsFiddle的链接

http://jsfiddle.net/bymb6kvm/2/

这是我的代码:

<nav>
                <div id="menuu">
                    <ul class="niveau1">
                        <li><a id="lrf"  class="sousmenu" href="#">Test 1</a>
                            <ul id="lrfH" class="niveau2 on">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>

                            </ul>
                        </li>
                       <li><a id="cm" class="sousmenu" href="#">Test 2</a>
                            <ul id="cmH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>
                        <li><a id="dj" class="sousmenu" href="#">Test 3</a>
                            <ul id="djH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>  

CSS代码

#menuu ul{

 margin:0;
 padding:0;
 padding-left:97px;
 line-height:30px;
    }
#menuu li{
    float: left;
    list-style: outside none none;

        }
.sousmenu{

 color: #000 !important;
 text-decoration:none;
 width:150px;
 height:30px;
 display:block;
 text-align:center;
  border:1px solid #000;
}
.niveau2{
    margin-left: -50px !important;
}
.niveau2 a{
    padding-left:20px !important;
    text-decoration:none;
    color:red ;
}
.sousmenu:hover{
    color: #fff !important;
    background-color: #ddd;
    border-bottom-color: #000 !important;
}
#menuu ul ul{
     position:absolute;
     visibility:hidden;
     padding-left:0px;
          }

#menuu ul ul li:hover a{
  color:#000;
}
#menuu ul ul ul{
 left:152px;
 top:-0.5px;
 display:none;
         }

 #menuu ul li:hover ul{
  visibility:visible;   
        }
.niveau2.on{
    visibility:visible !important;
}

JS代码

$(document).ready(function(e){
                    $('.sousmenu').hover(function(e){
                        e.preventDefault();
                        var getID=$(this).attr('id');
                        $("#"+getID+"H").css("visibility","visible");
                        $(".on").css("visibility","hidden");
                    });

                });

Answer 1

试试这个:

$(document).ready(function(e) {
  $('.sousmenu').hover(function(e) {
    e.preventDefault();
    var getID = $(this).attr('id');
    $(".niveau2").hide();
    $("#" + getID + "H").show();
  });
});

#menuu ul {
  margin: 0;
  padding: 0;
  padding-left: 97px;
  line-height: 30px;
}

#menuu li {
  float: left;
  list-style: outside none none;
}

.sousmenu {
  color: #000 !important;
  text-decoration: none;
  width: 150px;
  height: 30px;
  display: block;
  text-align: center;
  border: 1px solid #000;
}

.niveau2 {
  margin-left: -50px !important;
}

.niveau2 a {
  padding-left: 20px !important;
  text-decoration: none;
  color: red;
}

.sousmenu:hover {
  color: #fff !important;
  background-color: #ddd;
  border-bottom-color: #000 !important;
}

#menuu ul ul {
  position: absolute;
  visibility: hidden;
  padding-left: 0px;
}

#menuu ul ul li:hover a {
  color: #000;
}

#menuu ul ul ul {
  left: 152px;
  top: -0.5px;
  display: none;
}

#menuu ul li:hover ul {
  visibility: visible;
}

.niveau2.on {
  visibility: visible !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
  <div id="menuu">
    <ul class="niveau1">
      <li><a id="lrf" class="sousmenu" href="#">Test 1</a>
        <ul id="lrfH" class="niveau2 on">
          <li><a href="#">ss test 1</a></li>
          <li><a href="#">ss test 2</a></li>

        </ul>
      </li>
      <li><a id="cm" class="sousmenu" href="#">Test 2</a>
        <ul id="cmH" class="niveau2">
          <li><a href="#">ss test 1</a></li>
          <li><a href="#">ss test 2</a></li>
        </ul>
      </li>
      <li><a id="dj" class="sousmenu" href="#">Test 3</a>
        <ul id="djH" class="niveau2">
          <li><a href="#">ss test 1</a></li>
          <li><a href="#">ss test 2</a></li>
        </ul>
      </li>

    </ul>
  </div>
</nav>

View on jsFiddle