将鼠标悬停在 Acordeon 菜单上的操作

Hover action on Acordeon menu

本文关键字：操作 菜单 Acordeon 鼠标 悬停      更新时间：2023-09-26

我正在寻找一个解决方案，如何通过将鼠标悬停在父链接上来打开和关闭手风琴？我知道我可以添加一个悬停方法，但是当我删除光标时，它总是关闭手风琴。我应该只在将鼠标悬停在另一个项目上时关闭菜单。

如果有人能给我一个提示，那就太好了！

$(document).ready(function () {
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
  });
  if($(".active").parent().parent().is('#nav')){
  		$(".active").next().slideToggle();
  }else{
  	$(".active").parents('ul').siblings('a').click();
  }
 
});
#nav {
    float: left;
    width: 280px;
}
#nav li a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    list-style:none;
}
#nav li a:hover, #nav li a.active {
}
#nav li ul {
    display: none; // used to hide sub-menus
     list-style:none;
}
#nav li ul li a {
    padding: 10px 25px;
}
ul{
  list-style:none;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
  <li><a href="#" >Item 1</a>
    <ul>
      <li><a href="#" class="active">Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub-Item 3 a</a></li>
      <li><a href="#">Sub-Item 3 b</a></li>
      <li><a href="#">Sub-Item 3 c</a></li>
      <li><a href="#">Sub-Item 3 d</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>
    <ul>
      <li><a href="#">Sub-Item 4 a</a></li>
      <li><a href="#">Sub-Item 4 b</a></li>
      <li><a href="#">Sub-Item 4 c</a></li>
    </ul>
  </li>
</ul>

这里在jsfiddle中也有同样的事情：https://jsfiddle.net/8y60hre0/8/

$(document).ready(function () {
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }else{
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
       $(this).next().slideToggle();
    }
  });
    $('#nav > li > a').hover(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
  });

  if($(".active").parent().parent().is('#nav')){
        $(".active").next().slideToggle();
  }else{
    $(".active").parents('ul').siblings('a').click();
  }
});
相关文章：