jQuery专注于下拉菜单不起作用

Question

我很难找出我的列表下拉列表。它与ul li：hover ul li。在jQuery中，因为我不认为在CSS中这样做。我试图实现的目标是当我单击Ul li ul li下降时。

html

<nav id="navbar">
  <div class="dropdown-btn">Go To...</div>
  <ul class="navbar-tab">
    <li class="navbar-tab-1 selected">Home</li>
    <li class="navbar-tab-1 select">Searches
      <ul class="hover-list select">
        <li><a>Search</a></li>
        <li><a>Rocks</a></li>
      </ul>
    </li>
    <li class="navbar-tab-1 select">Engagement Rings
      <ul class="hover-list select">
        <li><a>Verragio</a></li>
      </ul>
    </li>
    <li class="navbar-tab-1 select">Services
      <ul class="hover-list select">
        <li><a href="">Repair</a></li>
      </ul>
    </li>
  </ul>
</nav>

jQuery

$(".navbar-tab-1").focus(function(){
  $(".hoverlist li").css("display","block").fadeOut();
});

Answer 1

您的代码中有几个问题：

1. focus不使用ul元素。您可以使用hover。
2. 您需要将类选择器更改为.hover-list而不是.hoverlist
3. 您最初应该将display:none设置为所有.hover-list元素，以便将鼠标悬停在ul上时。
4. 使用fadeIn()在淡入淡出中显示它们。
5. 您可以为您使用cursor: pointer; CSS ul元素具有适当的光标指针链接

$(".navbar-tab-1").hover(function(){
  $('.hover-list').css("display","none");
  $(this).find(".hover-list").css("display","block").fadeIn();
});

.hover-list{
  display: none;
}
.navbar-tab-1{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
    <div class="dropdown-btn">Go To...</div>
    <ul class="navbar-tab">
        <li class="navbar-tab-1 selected">Home</li>
        <li class="navbar-tab-1 select">Searches
            <ul class="hover-list select">
                <li><a>Search</a></li>
                <li><a>Rocks</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Engagement Rings
            <ul class="hover-list select">
                <li><a>Verragio</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Services
            <ul class="hover-list select">
                <li><a href="">Repair</a></li>
            </ul>
        </li>
    </ul>
</nav>

如果您还想在鼠标不悬停在ul上时隐藏li项目，则可以使用mouseover和mouseout事件而不是hover：

$(".navbar-tab-1").mouseover(function(){
  $('.hover-list').css("display","none");
  $(this).find(".hover-list").css("display","block").fadeIn();
});
$(".navbar-tab-1").mouseout(function(){
  $('.hover-list').css("display","none");
});

.hover-list{
  display: none;
}
.navbar-tab-1{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
    <div class="dropdown-btn">Go To...</div>
    <ul class="navbar-tab">
        <li class="navbar-tab-1 selected">Home</li>
        <li class="navbar-tab-1 select">Searches
            <ul class="hover-list select">
                <li><a>Search</a></li>
                <li><a>Rocks</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Engagement Rings
            <ul class="hover-list select">
                <li><a>Verragio</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Services
            <ul class="hover-list select">
                <li><a href="">Repair</a></li>
            </ul>
        </li>
    </ul>
</nav>