如何使用jquery使子菜单显示？

时间：2018-09-12 05:47:24

标签： javascript jquery html5 css3

当我将鼠标悬停在下面的菜单项下时，我拼命尝试使子菜单出现在菜单项下。 当使用css悬停菜单项时，我创建了颜色更改和下划线，但不知道如何使子菜单出现在菜单项下。我没有与jquery相关的知识，所以我用google搜索了jquery的效果，但是也没有用。 还有其他方法可以使它不使用jquery出现吗？ 

<style>
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 
.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
</style>
<body>
    <nav class="navigation">
        <ul class="menu">
          <li class='menu-item' tabindex='0'>
             <span class="menu-item-text menu-act">About HTML</span>
            <ul class='sub-menu'>
                <li>
                 <a href="#">HTML Introduction</a>
                </li>
               <li>
                 <a href="#">Reference Introduction</a>
                </li>
               <li>
                 <a href="#">Examples</a>
                </li>
            </ul>
           </li>
          </ul>
      </nav>
</body>

2 个答案:

答案 0 :(得分：1)

您不需要JQuery在悬停时显示子菜单。您可以使用CSS来实现。 

.menu-item:hover .sub-menu {display: block;}

如果子菜单不止一个，请为它们使用id或不同的类名。因此，您可以在每个菜单下显示相应的子菜单。

<style>
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 

.menu-item:hover .sub-menu {display: block;}

.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
</style>
<body>
    <nav class="navigation">
        <ul class="menu">
          <li class='menu-item' tabindex='0'>
             <span class="menu-item-text menu-act">About HTML</span>
            <ul class='sub-menu'>
                <li>
                 <a href="#">HTML Introduction</a>
                </li>
               <li>
                 <a href="#">Reference Introduction</a>
                </li>
               <li>
                 <a href="#">Examples</a>
                </li>
            </ul>
           </li>
          </ul>
      </nav>
</body>

使用JQuery可以模拟如下：

$(".menu-item").on("mouseover", function(){   //This will display the submenu on mouse hover.
$(".sub-menu").show();
});

$(".menu-item").on("mouseout", function(){ //This will hide the submenu when mouse leaves the menu item.
$(".sub-menu").hide();
});
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 

.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <nav class="navigation">
            <ul class="menu">
              <li class='menu-item' tabindex='0'>
                 <span class="menu-item-text menu-act">About HTML</span>
                <ul class='sub-menu'>
                    <li>
                     <a href="#">HTML Introduction</a>
                    </li>
                   <li>
                     <a href="#">Reference Introduction</a>
                    </li>
                   <li>
                     <a href="#">Examples</a>
                    </li>
                </ul>
               </li>
              </ul>
          </nav>
    </body>

您可以使用jQuery的 mouseover 和 mouseout或mouseleave 事件。

答案 1 :(得分：0)

您也可以使用CSS来做到这一点，但是您在jquery中提到了您想要的原因，这就是为什么我使用Jquery来做到这一点。

我想你想要这样：-

$(document).ready(function(){
  $('.menu-item-text').mouseover(function(){
    $(this).next('.sub-menu').show();
  });
  $('.menu-item-text').mouseout(function(){
    $(this).next('.sub-menu').hide();
  });
});
.menu {
  margin-left: 220px;
}
.menu-item-text {
  display: inline-block;
  margin-top: 18px;
  color: black;
  font-weight: 550;
}
.menu-item-text:hover {
  content: '';
  color: red;
}
.menu-item-text:hover:after {
  content:'';
  display: block;
  border-bottom: 2px solid rgb(15, 1, 1);
  margin-top: 19px;
}
.sub-menu1 {
  background: yellowgreen;
  position: absolute;
  display: block;
}
.sub-menu li {
  white-space: nowrap;
  display: inline;
}
.sub-menu a:before {
  content: '☆';
  top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
  content: '★';
} 
.navigation .sub-menu {
  display: none;
}
.menu-act .menu-item-text  {
  color: red;
}
.sub-menu1 li, .sub-menu1 a {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
    <ul class="menu">
      <li class='menu-item' tabindex='0'>
         <span class="menu-item-text menu-act">About HTML</span>
        <ul class='sub-menu'>
            <li>
             <a href="#">HTML Introduction</a>
            </li>
           <li>
             <a href="#">Reference Introduction</a>
            </li>
           <li>
             <a href="#">Examples</a>
            </li>
        </ul>
       </li>
      </ul>
  </nav>

相关问题
最新问题