ul NavBar上下滑动，使用slideToggle保持滑动

Question

所以我现在用jQuery slideToggle创建我的导航菜单。但我发现在这种情况下，当我立即将所有这些快速悬停在下面时，下拉菜单会继续上下滑动。

我想对那些转换进行一些更改，当我们从具有较大高度的列表更改为较低高度时，下拉菜单将直接滑动到较低高度菜单的边界，而不是首先向上滑动到顶部然后向下滑动到较低的高度。

例如，我有Tab A（＆gt; Dropdown A）＆amp;标签B（＆gt;下拉B）。下拉A的高度为150px，下拉B的高度为100px。我想这样做：将鼠标悬停在标签A上，下拉列表从顶部向下滑动到高度150px。然后，如果我将鼠标悬停在标签B上，则下拉A将消失并显示下拉列表B.但是过渡将从150px滑动到100px而不是150px> 100px。 0px> 100px的。

这可以简单地通过jQuery解决吗？对我期望的效果有任何限制吗？如果您有任何意见，请帮忙！谢谢！

 $(function(){
            $('.dropdown').hover(function(){
                $(this).find('div').slideToggle();
                $('.dropdown-content').css("left","0");

            })    
        })

            body{
              margin:0;
            }
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: blue;
            }

            li {
                float: left;
            }

            li a, .dropbtn {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            li a:hover, .dropdown:hover .dropbtn {
                background-color: white;
                color:blue;
            }

            li.dropdown {
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: white;
                width:100%;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;.
                left: 0 !important;
            }

            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

            .dropdown-content a:hover 
                background-color: #f1f1f1;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Home</a>
                <div class="dropdown-content">
                    <a href="#">Link A</a>
                    <a href="#">Link B</a>
                    <a href="#">Link C</a>
                    <a href="#">Link D</a>
                    <a href="#">Link E</a>
                    <a href="#">Link F</a>
                    <a href="#">Link G</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">News</a>
                <div class="dropdown-content">
                    <a href="#">Link I</a>
                    <a href="#">Link II</a>
                    <a href="#">Link III</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                    <a href="#">Link 4</a>
                    <a href="#">Link 5</a>
                </div>
            </li>
        </ul>

        <h3>Test</h3>
        <p>Testing</p>

Answer 1

您缺少$(function(){ $('.dropdown').hover(function(){ $(this).find('div').stop().slideToggle(); $('.dropdown-content').css("left","0"); }); }); 方法：

＆＃13;

＆＃13;

body {
  margin:0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: white;
  color: blue;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;.
  left: 0 !important;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Home</a>
                <div class="dropdown-content">
                    <a href="#">Link A</a>
                    <a href="#">Link B</a>
                    <a href="#">Link C</a>
                    <a href="#">Link D</a>
                    <a href="#">Link E</a>
                    <a href="#">Link F</a>
                    <a href="#">Link G</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">News</a>
                <div class="dropdown-content">
                    <a href="#">Link I</a>
                    <a href="#">Link II</a>
                    <a href="#">Link III</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                    <a href="#">Link 4</a>
                    <a href="#">Link 5</a>
                </div>
            </li>
        </ul>

        <h3>Test</h3>
        <p>Testing</p>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

.stop()