Question

我正在使用bootstrap并在折叠的导航栏中遇到一些问题。我在一些下拉菜单中添加了视觉效果，但是需要在折叠视图中删除它们（当导航栏折叠时）。我已经发现，当视图更改为折叠视图时，会触发一个事件：

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效果（需要删除的效果）。问题是，这种删除是暂时的。当网站切换到扩展模式时，我需要一个类似的事件。像这样的东西：

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

当网站从折叠视图切换到展开时，是否有任何事件被触发？

Answer 1

我不认为您正在寻找的确切事件存在，但有一个解决方法。您可以查看resize事件以查看视口的大小并从那里开始工作：

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

确定Bootstrap中的导航栏是否已扩展

1 个答案: