jquery 确定Bootstrap中的导航栏是否展开

cunj1qz1  于 2022-12-03  发布在  jQuery
关注(0)|答案(1)|浏览(155)

我正在使用引导程序,运行时遇到了一些折叠导航栏的问题。我在一些下拉菜单中添加了视觉效果,但它们需要在折叠视图中删除(当导航栏折叠时)。我已经发现,当视图变为折叠视图时,会触发一个事件:

show.bs.collapse    This event fires immediately when the show instance method is called.
shown.bs.collapse   This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse    This event is fired immediately when the hide method has been called.
hidden.bs.collapse  This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

我的js看起来像这样:

// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').mouseenter('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').mouseleave('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

$(document).on('show.bs.collapse', function(e){
$('.dropdown-menu').slideDown("normal", function() {$(this).remove();});
$('.dropdown-menu').slideUp("normal", function() {$(this).remove();});
});

我已经想出了,如何使用collapse事件来删除slideUp和slideDown效果(需要删除的效果)。问题是,这个删除是permernent。我需要一个类似的事件,当网站切换到扩展模式。类似这样的东西:

$(document).on('show.bs.expand', function(e){
//DO FUNCTION
});

当网站从折叠视图切换到展开视图时,是否触发了任何事件?

siv3szwd

siv3szwd1#

我不认为您要寻找的确切事件存在,但有一个解决方法。您可以查看resize事件,以了解 windows 的大小,并从那里开始工作:

$(window).resize(function() {
  if ($(this).width() < 768) {
    //do something
  }
});

相关问题