Question

我想为移动设备和触摸设备创建响应式菜单，例如Bootstrap菜单我在Jsfiddle

上写了这段代码

如何将父母与子女分开？
或如何将菜单项与子菜单分开？
像：

##Internet
-submenu
...

在我的选择框中。

Answer 1

添加如下变量：

   var prefix = $(this).closest('ul').hasClass("sub-menu") ? "- " : "";

然后将其附加到您的代码中：

$('#RESPONSIVE-MENU').append($("<option></option>").attr("value", $(this).attr('href')).text(
   prefix +

   $(this).html()

)); });

Demo here

更新：

动态（和更好）的方法可以是这个：

var prefix = "",
    x = $(this).parents('ul').length;
for (i = 0; i < x; i++) prefix = prefix + "-";

http://jsfiddle.net/v7GL4/2/

Answer 2

我找到了全面的方式来得到我的答案...... pumpkinzzz和...谢谢！

$('<select/>', {id: 'RESPONSIVE-MENU'}).appendTo('.navmen-topmenu-container');

var options = '<option selected>Go to...</option>';
$('.navmen-topmenu-container').find('a').each(function () {
    var text = $(this).text(),
        depth = $(this).parent().parents('ul').length,
        depthChar = '',
        i = 1;
    for (i; i < depth; i++) { depthChar += '&ndash;&nbsp;'; }
    options += '<option>' + depthChar + text + '</option>';
});
$('#RESPONSIVE-MENU').append(options).appendTo('.navmen-topmenu-container');
$('#RESPONSIVE-MENU').change(function(){if($(this).val() !=''){window.location.href=$(this).val();event.preventDefault();}});

Answer 3

http://jsfiddle.net/v7GL4/3/

 $('.navmen-topmenu-container').append('<select id="RESPONSIVE-MENU"><option value="">Nav Menu</option></select>');

     $('#navmen-topmenu li a').each(function(){
         if($(this).closest('ul').hasClass('sub-menu')) {
             $('#RESPONSIVE-MENU').append('<option value="' + $(this).attr('href') + '"> - ' + $(this).text() + '</option>');
         } else {
             $('#RESPONSIVE-MENU').append('<option value="' + $(this).attr('href') + '">##' + $(this).text().toUpperCase() + '</option>');
         }
    });

    $('#RESPONSIVE-MENU').change(function(){
        if($(this).val() !=''){
            window.location.href=$(this).val();event.preventDefault();
        }
    });

在jQuery中从ul-li-menu创建选择框

3 个答案: