Question

我有一个引导标签菜单，如果您在手机或平板电脑上查看我的演示，我会在平板电脑和移动设备上对其进行响应 - 当您调整页面大小不到768像素时，您将看到我的响应标签。但是，如果我再次将页面调整为＆gt; 768px，我想再次将我的标签菜单设置为无响应（默认），我想我必须杀死我的功能？我怎样才能做到这一点？

Codepen Demo

＆＃13;

!function(t){var o=function(){var o,e=[],n=!1,i=function(t){clearTimeout(o),o=setTimeout(d,100)},d=function(){for(var t=0,o=e.length;t<o;t++)e[t].apply()};return{register:function(o){e.push(o),!1===n&&(t(window).bind("resize",i),n=!0)},unregister:function(t){for(var o=0,n=e.length;o<n;o++)if(e[o]==t){delete e[o];break}}}}(),e=function(e,n){this.element=t(e),this.dropdown=t('<li class="dropdown hide pull-right tabdrop"><a class="dropdown-toggle" data-toggle="dropdown" href="#">'+n.text+' <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>').prependTo(this.element),this.element.parent().is(".tabs-below")&&this.dropdown.addClass("dropup"),o.register(t.proxy(this.layout,this)),this.layout()};e.prototype={constructor:e,layout:function(){var o=[];this.dropdown.removeClass("hide"),this.element.append(this.dropdown.find("li")).find(">li").not(".tabdrop").each(function(){this.offsetTop>0&&o.push(this)}),o.length>0?(o=t(o),this.dropdown.find("ul").empty().append(o),1==this.dropdown.find(".active").length?this.dropdown.addClass("active"):this.dropdown.removeClass("active")):this.dropdown.addClass("hide")}},t.fn.tabdrop=function(o){return this.each(function(){var n=t(this),i=n.data("tabdrop"),d="object"==typeof o&&o;i||n.data("tabdrop",i=new e(this,t.extend({},t.fn.tabdrop.defaults,d))),"string"==typeof o&&i[o]()})},t.fn.tabdrop.defaults={text:'<i class="icon-align-justify"></i>'},t.fn.tabdrop.Constructor=e}(window.jQuery);

function tabMobile() {
  if ($(window).width() < 768) {
    $(' .nav-tabs').tabdrop({
      text: 'Click to navigation',
      align: 'right',
    });
  } else {
    //kill function here
  }
}


$(document).ready(function() {
  tabMobile();
});

$(window).resize(function() {
  tabMobile();
});

＆＃13;

.main {
  width: 960px;
  margin: 30px auto;
}

＆＃13;

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="main">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Configuration</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

＆＃13;

Answer 1

你似乎在混淆了一些事情......

首先，tabdrop将仅在需要时自动显示。所以使用你的bootstrap应该足以让它在较小的屏幕上崩溃。

第二个想法，您可能想要使用bootstraps导航栏示例，这是一个提供响应式菜单的良好开端。

第三，作为奖励：做出反应的东西不是适合移动的东西（当可用的屏幕宽度很低时）。响应的东西是适应屏幕大小的东西，并自动响应变化。您无法使菜单仅对＆lt; 768，任何对特定分辨率做出反应都会有所回应......好吧，试着快速总结一下。

如何禁用js功能？

1 个答案: