如何禁用js功能？

Question

我有一個引導選項卡菜單，並使平板電腦和移動設備上的選項卡響應，如果您查看移動設備或平板電腦上的演示 - 當您調整小於768像素的頁面大小時，您會看到我的響應選項卡。但如果我調整我的頁面再次調整到> 768px我想再次得到我的標籤菜單作爲非響應（默認），我想我必須殺死我的功能？我怎樣才能做到這一點 ？

Codepen Demo

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

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

<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>

Answer 1

你似乎在這裏混合了一些東西......

首先，tabdrop會自動僅在需要時顯示。所以使用你的bootstrap應該足以讓它在較小的屏幕上崩潰。

再次想到，您可能想使用bootstraps nav-bar示例，這對於擁有響應式菜單是一個很好的起點。第三，作爲獎勵：使響應的東西不適用於移動設備（當可用的屏幕寬度較低時）。響應的東西是適應屏幕尺寸的東西，並自動響應變化。你不能讓你的菜單隻響應< 768，使任何對特定分辨率做出反應的東西都會有反應......好吧，試圖快速總結。