悬停时 Jquery 幻灯片下拉菜单

Jquery slideDown menu when hover

本文关键字：下拉菜单 幻灯片 Jquery 悬停      更新时间：2023-09-26

好的，所以我一直在尝试制作一个导航，当悬停时会有一个向下滑动的框，我发现这个：将鼠标悬停在该菜单上时保持 Jquery slideDown 菜单打开？

第三个答案几乎对我有用，但我的问题是，当我将鼠标悬停在主菜单上时，子菜单也会向下滑动，当我悬停在子菜单上时，什么都不会发生。

我不确定这是否可能，但我想制作一个导航，它只会向下滑动我悬停的那个。

这是我到目前为止的代码。我真的很讨厌这个，我不懂Jquery，所以如果你能帮我，请做。非常感谢！

Jquery 

    $(document).ready(function () {
    var menu = $('.menu')
    menu.hide();
    $('#mainbutton').mouseover(
        function () {
            menu.stop(true, true).slideDown(400);
        }
    );
    $(".menu").mouseleave(
        function () {
            menu.stop(true, true).slideUp(400)
        })
});

.CSS

        #navigation {
    border: solid 1px black;
    height: 300px;
}
.mainbutton {
    margin-top: 10px;
    -webkit-order: 2;
    margin-right: 0%;
    background-color: #f1f1f1;
}
.dropdown {
    -webkit-order: 3;
    background-color: #fff;
    border: 2px dotted #f1f1f1;
    width: 195px;
    height: auto;
    text-align: justify;
    background: url('http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=25977922');
}
.menu {
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: center;
    padding-left: 8%;
}
.menu a, a:visited {
    font-family: Abstrec, sans-serif;
    color: #505050;
    text-decoration: none;
    font-size: .5em;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 2px solid #dbdbdb;
    padding-bottom: 10px;
}
.menu a:hover {
    color: #bfbfbf;
    -webkit-transition:.3s;
    transition:.3s;
    border-bottom: 2px solid #aef4e7;
}
.itemone {
    -webkit-order: 1;
    height: auto;
    padding: 5px;
    z-index: 3;
    text-align: justify;
}

.HTML

        <div class="navigation">
        <div class="nav">
                <div id="mainbutton">
                   <center> <a href="#">about</a> </center>
                </div> </div> </div>

        <div class="dropdown">
            <div class="menu">
                <div id="itemone"></div>
this is a sample text
this is a sample text
this is a sample text
this is a sample text
this is a sample text
    <br></div></div>

        <div class="navigation">
        <div class="nav">
                <div id="mainbutton">
                   <center> <a href="#">tagboard</a> </center>
                </div> </div> </div>

        <div class="dropdown">
            <div class="menu">
                <div id="itemone"></div>
this is a sample text
this is a sample text
this is a sample text
this is a sample text
this is a sample text
    <br></div></div>

PS：jsfiddle不会让我生成。 我不知道为什么很抱歉，如果它一团糟。

无论如何，如果你想看到它，那么这里：http://sdmkn.blogspot.com/

非常感谢！！

这是一个示例 小提琴

<nav>
  <ul>
    <li>Item 1
      <ul>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut tortor vel mi elementum consequat eu quis velit. Vestibulum nec bibendum lacus, sit amet tristique nulla.
        </li>
      </ul>
    </li>
    <li>Item 2
      <ul>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut tortor vel mi elementum consequat eu quis velit. Vestibulum nec bibendum lacus, sit amet tristique nulla.
        </li>
      </ul>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</nav>

nav {
  width: 250px;
}
ul {
  list-style: none;
}
li {
  background: #ddd;
  width: 100%;
  line-height: 25px;
  margin: 0 0 5px;
  padding: 2px 0;
  text-align: center;
  cursor: pointer;
}
li ul {
display: none;
}
li ul li {
  position: relative;
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}

(function($) {
  $('ul li').mouseover(function() {
    $('ul',this).stop().slideDown(400, 'linear');
  });
  $('li, li ul').mouseout(function() {
    $('li ul').stop().slideUp(400, 'linear');
  });
})(jQuery);
相关文章：