不需要的slideToggle效果

Question

所以我现在使用jQuery slideToggle创建导航菜单。但是我发现在这种情况下，当我将鼠标悬停在所有菜单上时，下拉菜单将保持上下滑动。

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

例如，我有Tab A（> Dropdown A）和Tab B（> Dropdown B）。下拉菜单A的高度为150像素，下拉菜单B的高度为100像素。我要像这样：将鼠标悬停在选项卡A上，然后将其向下滑动到距离顶部150像素的高度。然后，如果我将鼠标悬停在选项卡B上，则下拉菜单A将消失，并且将显示下拉列表B。但是过渡将从150px滑动到100px，而不是150px> 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

您缺少.stop() 方法：

$(function(){
  $('.dropdown').hover(function(){
    $(this).find('div').stop().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>

.stop()