關閉另一個項目時懸停的菜單

我正在創建一個帶有兩個下拉菜單的菜單。我需要在菜單項懸停時打開下拉菜單，但如果其他菜單項懸停在上面，請關閉下拉菜單項。關閉另一個項目時懸停的菜單

我遇到的問題是如果我將鼠標懸停在第二個菜單項上，則會獲得第一個下拉框關閉。

請參閱我的小提琴這裏：http://www.bootply.com/uEKWCdNj4C

我已經通過其他的問題看，而這一次似乎可能是有用的，但我有把它應用到我的情況麻煩：Vertical Menu to stay open on hover then close when another is hovered

所以我很抱歉，如果這是重複的...任何幫助，將不勝感激。謝謝！

2016-07-20 Hope

在致電slidedown之前，您可以在打開的ul上致電slideup。像下面那樣

$(document).ready(function() { 

    $(".nav-basic").hover(function() { 
     $('ul.menu-applied').slideUp('medium'); 
     $('ul.menu-basic').slideDown('medium'); 
    }); 
    $('ul.menu-basic').bind('mouseleave', function(){ 
    $('ul.menu-basic').slideUp('medium'); 
    }); 

    $(".nav-applied").hover(function() { 
     $('ul.menu-basic').slideUp('medium');  
     $('ul.menu-applied').slideDown('medium'); 
    }); 
    $('ul.menu-applied').bind('mouseleave', function(){ 
    $('ul.menu-applied').slideUp('medium'); 
    }); 


});

來源

2016-07-20 20:12:52

這工作完美。謝謝！ – Hope

因此，在懸停的元素上設置一個class="isHovered"。設置框class="isHovered"藏漢..

如果hover被再次調用，或者可以說mouseenter，你是否isHovered設置在當前框和其他中...或迭代任何箱子有可能。 ..

您可以將當前懸停的元素ID存儲在一個變量和方框ID中。然後使用這些值。由於JS不是多線程的，你可以依賴於執行順序...

來源

2016-07-20 20:14:17 Lemonade

你只需要更新你的腳本調用效果基本show功能：

$(".nav-basic").hover(function() { 
     $('ul.menu-basic').slideDown('medium'); 
    $('ul.menu-applied').slideUp('medium'); 
    }); 


    $(".nav-applied").hover(function() {  
     $('ul.menu-basic').slideUp('medium'); 
     $('ul.menu-applied').slideDown('medium'); 
    });

來源

2016-07-20 20:15:21 GunWanderer

您的代碼可以使用一些優化，但你可以基本上呼籲slideUp()所有其他$(.menu-interior')元素是目標類的不是：

例子：$('.menu-interior:not(.menu-basic)').slideUp();

看到這裏分叉的小提琴：http://www.bootply.com/DZxktgUtjh

注意：這將關閉任何其他打開菜單，而不必在菜單增長時對所有其他類進行硬編碼。

來源

2016-07-20 20:15:55 Drey

$(document).ready(function() { 

    $(".nav-basic").hover(function() { 
     $('ul.menu-basic').slideToggle('medium'); 
    }); 

    $(".nav-applied").hover(function() { 
     $('ul.menu-applied').slideToggle('medium'); 
    }); 

});

來源

2016-07-20 20:22:50

儘管此代碼可能會回答問題，但提供有關* how *和/或* why *解決問題的其他上下文會提高答案的長期價值。 –

關閉另一個項目時懸停的菜單

回答

相關問題