菜單響應（menutron.js）+標籤的jQuery

我都基於一個簡單的jQuery腳本下列選項卡菜單，但我想實現的響應版本的插件menutron.js菜單響應（menutron.js）+標籤的jQuery

任何想法，我怎麼能運行在響應版本中選擇？

$(".tabs-menu a").click(function (event) { 
     event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 
    }); 

    $("#sidebar").menutron({ 
     maxScreenWidth: 400, 
     menuTitle: 'Menu Responsive' 
    });

版本正常：

版本響應：

enter image description here

例：http://jsfiddle.net/y0vLoasm/3/

來源

2014-11-04 Raul

對插件源的快速瀏覽顯示它僅適用於完整的URL。這意味着你不能將它用於你想要的東西 – 2014-11-04 16:48:59

任何可能的解決方案？ – Raul 2014-11-04 16:52:01

爲此發佈了一個答案 – 2014-11-04 17:45:01

這是您的問題的快速解決方案。我手動創建select元素，並將其更改委託給實際鏈接。因此，使用select導航時，您在那裏執行的任何代碼都會執行。

創建在開始select元素，並使用媒體查詢顯示/隱藏基於瀏覽器，它的寬度

CSS

#sidebar > .tabs-menu{display:block} 
#sidebar > select{display:none;} 

@media (max-width:400px){ 
    #sidebar > .tabs-menu{display:none} 
    #sidebar > select{display:block} 
}

的JavaScript

var select = $('<select><option>Menu Cierra Puertas</option></select>'), 
    tabLinks = $(".tabs-menu a").click(function (event) { 
    event.preventDefault(); 

    var self = $(this), 
     parent = self.parent(), 
     tab = self.attr('href'), 
     index = tabLinks.index(this); 

    parent.addClass("current") 
      .siblings().removeClass("current"); 

    $(".tab-content").not(tab).css("display", "none"); 
    $(tab).fadeIn(); 

    // highlight the option in the select so it matches current one 
    select[0].options[index+1].selected = true; 
}); 

// create the select options 
tabLinks.each(function(idx, item){ 
    $('<option>',{ 
     text: $(this).text() 
    }).appendTo(select); 
}); 
// handle navigation from the select element 
select.appendTo('#sidebar') 
     .on('change', function(){ 
      var index = this.selectedIndex-1; 
      if (index >= 0){ 
       tabLinks.eq(index).trigger('click'); 
      } 
     });

演示在http://jsfiddle.net/gaby/v95r32ym/

來源

2014-11-04 17:42:39

菜單響應（menutron.js）+標籤的jQuery

回答

相關問題