菜单响应（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

回答

相关问题