使用jQuery在悬停时显示菜单子元素

时间：2018-03-23 18:07:34

标签： javascript jquery html css

我在侧边栏中创建了一个带有导航菜单的HTML页面。一些菜单元素包含子元素。我想做的是：

隐藏所有子元素（这是我管理的） 如果我将鼠标悬停在具有子元素的元素上，则显示子元素。 如果我将鼠标悬停在没有任何子元素的元素上，请不要做任何事情。

我有点知道如何使用CSS，但由于这是一个jQuery类，我想使用jQuery。

我已经在网上找到了一些提示，但我真的不知道如何将这些建议应用到我的代码中。我是jQuery的新手，因此非常感谢任何帮助！

这是HTML：

   <nav>
  <ul class="menu">
    <li><a href="">Home</a></li>
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a>
      <ul class="submenu">
        <li><a href="">Subpage 2a</a></li>
        <li><a href="">Subpage 2b</a></li>
        <li><a href="">Subpage 2c</a></li>
      </ul>
    </li>
    <li><a href="">Page 3</a></li>
  </ul>
</nav>

CSS：

nav {
    float: left;
    width: 200 px;
    position: fixed;
    top: 80px;
    left: 10px;
    border-top: 1px solid #9AA2B2;
    border-right: 1px solid #9AA2B2;
    border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
    display: block;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%); 
    border-top: 1px solid #9AA2B2;
    border-bottom: 1px solid #2E323A;
    text-decoration: none;
    color: white;
}

.menu a:hover {

    background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%); 
}


.submenu a {

    padding: 10px 25px;
    background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
    border-bottom: 1px solid #CFD0CF;
    color: black;
}

.submenu a:hover {

    background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%); 
  background-color: #C5C6C5;
}

.submenu {
  overflow: hidden;
  max-height: 0;
}

这是我发现的jQuery片段，似乎有意义，但我不知道如何应用它。

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

5 个答案:

答案 0 :(得分：0)

要实际回答你的问题，不像其他人......基本上添加一个mouseenter事件处理程序，检查li是否有子菜单，如果是，则将活动类添加到其中。

将其修改为您希望它们关闭的方式

＆＃13;
＆＃13; 
$('.menu li').mouseenter(function() {
		if($(this).has('.submenu')) {
			$(this).find('.submenu').addClass('active');
		}
	});
  
  $('.menu .submenu').mouseleave(function() {
			$('.submenu').removeClass('active');
	});
＆＃13; 
nav {
    float: left;
    width: 200 px;
    position: fixed;
    top: 80px;
    left: 10px;
    border-top: 1px solid #9AA2B2;
    border-right: 1px solid #9AA2B2;
    border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
    display: block;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%); 
    border-top: 1px solid #9AA2B2;
    border-bottom: 1px solid #2E323A;
    text-decoration: none;
    color: white;
}

.menu a:hover {

    background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%); 
}


.submenu a {

    padding: 10px 25px;
    background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
    border-bottom: 1px solid #CFD0CF;
    color: black;
}

.submenu a:hover {

    background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%); 
  background-color: #C5C6C5;
}

.submenu {
  overflow: hidden;
  max-height: 0;
	transition: 0.3s ease;
}

.submenu.active {
	max-height: 200px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a>
      <ul class="submenu">
        <li><a href="#">Subpage 2a</a></li>
        <li><a href="#">Subpage 2b</a></li>
        <li><a href="#">Subpage 2c</a></li>
      </ul>
    </li>
    <li><a href="">Page 3</a></li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我修复了下面，然后示例的工作方式类似于以下代码段（用于演示目的，删除位置：已修复）：

1。将悬停事件绑定到$('nav > ul > li > a')的{​​{1}}内部，但当鼠标悬停在子菜单上时，它会滑动子菜单，因此需要将其更改为$('#nav > li > a')

2。将$('nav > ul > li')替换为max-height:0;以下是使用display而不是max-height的原因。

Check JQuery API:

正如JQuery定义：

  

.slideToggle（）方法可以设置匹配元素的高度。   这会导致页面的下半部分向上或向下滑动   揭露或隐藏物品。如果最初显示元素，则为   将被隐藏;如果隐藏，它将被显示。显示属性是   根据需要保存和恢复。如果元素的显示值为   内联，然后隐藏和显示，它将再次显示   排队。当隐藏动画后高度达到0时，   display style属性设置为none以确保元素号为no   更长时间会影响页面的布局。

display:none绑定的处理程序中的

3。，执行hover 

$('ul', $(this)).slideToggle( "slow" );
$(document).ready(function () {
  $('nav > ul > li').hover(function(){
      $('ul', $(this)).slideToggle( "slow" );
  });
});
nav {
    float: left;
    width: 200 px;
    top: 80px;
    left: 10px;
    border-top: 1px solid #9AA2B2;
    border-right: 1px solid #9AA2B2;
    border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
    display: block;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%); 
    border-top: 1px solid #9AA2B2;
    border-bottom: 1px solid #2E323A;
    text-decoration: none;
    color: white;
}

.menu a:hover {

    background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%); 
}


.submenu a {

    padding: 10px 25px;
    background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
    border-bottom: 1px solid #CFD0CF;
    color: black;
}

.submenu a:hover {

  background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%); 
  background-color: #C5C6C5;
}

.submenu {
  overflow: hidden;
  display:none;
}

答案 2 :(得分：0)

您只需对代码进行一些调整，主要是定位，但也需要进行一些小的CSS更改。

在所有jQuery代码中将#nav更改为.menu，以便定位正确的元素。

在max-height: 0; CSS中将display: none;更改为.submenu，以便显示您的子菜单。您还可以为菜单设置最小宽度，以便在子菜单可见时宽度不会改变。

您也可以选择修改jQuery代码或添加mouseout处理程序，以便当您不再位于父/子菜单上时隐藏子菜单。

看到这个小提琴：https://jsfiddle.net/vbryo27z/9/

答案 3 :(得分：0)

如果你只想使用jQuery来实现这一点。这就是你如何做到的。

$(document).ready(function() {

    $('.menu > li').hover(function() {

        $(this).has('.submenu').children('.submenu').stop().slideToggle();

    });

});

所以上面的代码所做的是，在悬停时，它会检查悬停元素是否有一个带有'.submenu'类的子节点，如果有，那么它会选择子节点并用滑动效果切换它。而不是幻灯片切换它你显然可以做任何事情，如添加一个类。

.stop()如果你要多次快速切换悬停，可以停止重复滑动效果。

答案 4 :(得分：0)

我们添加v0.1.1以找到const subMenu = $(this).find('.submenu');选择器的.submenu元素。

然后我们通过.menu > li和addClass添加我们的逻辑来切换课程。我还包括removeClass的第二个回调，它是hoverout。

.hover

由于我不想弄乱你的CSS，我只添加了以下规则

$(selector).hover(hoverInCallback, hoverOutCallback);

希望这有帮助！

以下是工作示例。 

.submenu.visible {
  overflow: initial;
  max-height: auto;
}
$(document).ready(function () {

  $('.menu > li').hover(function() {
      const subMenu = $(this).find('.submenu');
      
      subMenu.addClass('visible');
  },
  // hoverout
  function() {
      const subMenu = $(this).find('.submenu');
      
      subMenu.removeClass('visible');
  });
  
});
nav {
    float: left;
    width: 200 px;
    position: fixed;
    top: 80px;
    left: 10px;
    border-top: 1px solid #9AA2B2;
    border-right: 1px solid #9AA2B2;
    border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
    display: block;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%); 
    border-top: 1px solid #9AA2B2;
    border-bottom: 1px solid #2E323A;
    text-decoration: none;
    color: white;
}

.menu a:hover {

    background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%); 
}


.submenu a {

    padding: 10px 25px;
    background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
    border-bottom: 1px solid #CFD0CF;
    color: black;
}

.submenu a:hover {

    background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%); 
  background-color: #C5C6C5;
}

.submenu {
  overflow: hidden;
  max-height: 0;
}

.submenu.visible {
  overflow: initial;
  max-height: auto;
}

相关问题
最新问题