Question

我无法弄清楚我的列表的下拉列表。它类似于ul li：hover ul li。我想弄清楚的是像ul li：focus 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

您的代码中有几个问题：

focus不适用于ul元素。您可以使用hover。
您需要将班级选择器更改为.hover-list而不是.hoverlist
您最初应将display:none设置为所有.hover-list元素，这样当您将鼠标悬停在ul上时，就会显示它们。
使用fadeIn()以淡入效果显示它们。
您可以使用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>

如果您还希望在鼠标悬停在li上时隐藏ul项，则可以使用mouseover和mouseout事件代替{{1} }}：

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;
}

Jquery专注于下拉列表不起作用

1 个答案: