【问题标题】:Determine if navbar in Bootstrap is expanded or not确定 Bootstrap 中的导航栏是否展开
【发布时间】:2015-02-28 12:25:41
【问题描述】:

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

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
});

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

【问题讨论】:

    标签: jquery twitter-bootstrap navbar collapse


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-12-29
      • 1970-01-01
      • 1970-01-01
      • 2021-05-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多