ul NavBar slide rauf und runter gleiten mit slideToggle

Question

Also ich erstelle jetzt mein Navigationsmenü mit und jQuery slideToggle. Aber ich habe festgestellt, dass in diesem Fall das Dropdown-Menü weiter nach oben und unten rutscht, wenn ich alle gleichzeitig auf dem Bildschirm schwebe.

Ich möchte einige Änderungen an diesen Übergängen vornehmen, wenn wir von einer Liste mit größerer Höhe zu niedrigerer Höhe wechseln, würde das Dropdown-Menü direkt an die Grenze des unteren Höhen-Menüs gleiten anstatt zuerst nach oben zu gleiten und dann auf die niedrigere Höhe hinunterrutschen. Zum Beispiel habe ich Registerkarte A (> Dropdown A) & Registerkarte B (> Dropdown B). Dropdown A ist mit der Höhe 150px und Dropdown B ist mit 100px. Ich möchte es wie folgt machen: Hover auf Tab A, Dropdown Ein Slide runter bis 150px Höhe von oben. Wenn ich dann auf Tab B schwebe, ist Dropdown A verschwunden und Dropdown B wird angezeigt. Aber der Übergang würde von 150px auf 100px anstelle von 150px> 0px> 100px gleiten.

Kann dies einfach durch jQuery gelöst werden? Hat meine Wirkung irgendwelche Einschränkungen? Bitte helfen Sie, wenn Sie eine Meinung haben! Vielen Dank!

$(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

Sie vermissen die .stop() Methode:

$(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()