Wie deaktiviert js Funktion?

Question

Ich habe ein Bootstrap-Registerkarten-Menü und ich habe meinen Tab Responsive auf Tablet und mobilen Geräten gemacht, wenn Sie meine Demo auf Handy oder Tablet auschecken - wenn Sie die Größe der Seite kleiner als 768 px ändern, sehen Sie meinen Responsive Tab. aber wenn ich meine Seite wieder auf> 768px skaliere, möchte ich mein Tabs Menü wieder als nicht reagierend (Standard) bekommen und ich denke, ich muss meine Funktion beenden? wie kann ich das machen ?

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

Sie scheinen einige Dinge hier ...

Zunächst einmal Mischen bis zu werden, tabdrop automatisch nur bei Bedarf angezeigt werden. Die Verwendung des Bootstrap sollte also ausreichen, um auf kleineren Bildschirmen zu kollabieren.

Zweitens, vielleicht möchten Sie Bootstraps nav-bar Beispiel verwenden, es ist ein guter Ausgangspunkt für ein reaktionsfähiges Menü.

Drittens, als Bonus: Etwas Ansprechendes zu tun ist nicht etwas, das für Mobilgeräte funktioniert (wenn die verfügbare Bildschirmbreite niedrig ist). Etwas Ansprechendes passt sich der Bildschirmgröße an und reagiert automatisch auf Änderungen. Sie können Ihr Menü nicht nur für < 768 reaktiv machen, alles reagieren auf eine bestimmte Auflösung reagieren würde ... Nun, versuchen, wirklich schnell zusammenzufassen.