切換選項卡時，jQuery SlideDown不起作用

Question

當我們將div懸停在一個選項卡上時，帶有詳細信息的HTML帶有一些選項卡；當我們將鼠標懸停在第二個選項卡上時，第一個div會向上滑動，而第二個div會向下滑動。 一切正常，但是當我打開一個新選項卡並重新訪問我的頁面時，滑動不平滑或不起作用。

HTML頁面

<div id="navbar">
    <table id="navbar_link" class="navbar_link_index">
        <tr>
            <td id="about"><a href="TEMP">TEMP </a></td>
            <td id="services"><a href="TEMP">TEMP</a></td>
            <td id="products"><a href="TEMP">TEMP</a></td>
            <td><a href="TEMP">TEMP</a></td>
            <td><a href="TEMP">TEMP</a></td>
            <td><a href="TEMP">TEMP</a></td>
        </tr>
    </table>
</div>

<div class="nav_details" id="one"><table class="nav_details_table"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
    <p>TEMP</p></td></tr></table></div>

    <div class="nav_details" id="two"><table class="nav_details_table servicetbl"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
        <p>TEMP</p></td></tr></table></div>

        <div class="nav_details" id="three">
            <table class="nav_details_table servicetbl"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
                <p>TEMP</p></td></tr></table>
            </div>

JQUERY

$("#one").hover(function()     {$("#one").stop().slideDown().addClass("border_bottom_cls");$("#about").css("background","red");},function(){$("#one").stop().slideUp().removeClass("border_bottom_cls");$("#about").css("background","toggle");});
$("#two").hover(function(){$("#two").stop().slideDown().addClass("border_bottom_cls");$("#services").css("background","red");},function(){$("#two").stop().slideUp().removeClass("border_bottom_cls");$("#services").css("background","toggle");});
$("#three").hover(function(){$("#three").stop().slideDown().addClass("border_bottom_cls");$("#products").css("background","red");},function(){$("#three").stop().slideUp().removeClass("border_bottom_cls");$("#products").css("background","toggle");});

Answer 1

<script>  
  $(document).ready(function (){
    var t = null;
    $('#main-nav-item').hover(function(){
        var that = this;
        t = setTimeout(function(){
            $('#sub-nav-item').slideDown(200);
            t = null;
        }, 300);
    }, function(){
        if (t){
            clearTimeout(t);
            t = null;
        }
        else
            $('#sub-nav-item').slideUp(200);
    });
    });
</script>

只需關注＃main-nav-item和＃sub-nav-item

復制這些代碼並使用您的代碼進行修改。