创建导航选项'Sub Menu'

Question

我使用以下代码将标准导航转换为Wordpress中响应主题的选择菜单。

jQuery(document).ready(function ($) {
    $("<select />").appendTo("nav");
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Go to..."
    }).appendTo("nav select");
    $("nav a").each(function () {
        var el = $(this);
        $("<option />", {
            "value": el.attr("href"),
            "text": el.text()
        }).appendTo("nav select");
    });
    $("nav select").change(function () {
        window.location = $(this).find("option:selected").val();
    });
    $('#navigasi_menu_reseponsive').remove();
});

使用上述代码，一切都可以正常工作。我想知道如何添加使用子菜单的条件。例如，这里是WordPress导航创建的默认html。

<nav>
    <div id="navigasi_menu_reseponsive">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-500">
            <a href="http://localhost/themes123/category/portfolio/">Custom Color</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-349">
            <a href="#">Category</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-246">
                    <a href="http://localhost/themes123/category/interior/">Interior</a>
                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-548">
                    <a href="http://localhost/themes123/category/portfolio/">Portfolio</a>
                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-245">
                    <a href="http://localhost/themes123/category/lifestyle/">Lifestyle</a>
                </li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-367">
                    <a href="http://localhost/themes123/category/examples/">Examples</a>
                </li>
            </ul>
        </li>
    </div>
</nav>

我想做的是为每个有一类子菜单的ul添加"-"，这样我的列表看起来像这样：

转到…

类别（这将是父类）

--内部（这将是带有"-"的儿童）

--投资组合（这将是带有"-"的子项）

--生活方式

--示例

等等。。。

有人能帮忙吗？感谢

Answer 1

这样？

http://jsfiddle.net/SzBcm/2/

$('ul.sub-menu li a').each(function(index, item) {
    $(this).text('--' + $(this).text());
});

Answer 2

尝试

jQuery(function ($) {
    var $select = $("<select />").appendTo("nav");
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Go to..."
    }).appendTo($select);
    function add($ct, $a){
        $("<option />", {
            "value": $a.attr("href"),
            "text": $a.text()
        }).appendTo($ct);
    }
    function addGroup($group, $ul){
        $ul.children().each(function(){
            var $li = $(this), $a = $li.children('a');
            add($group, $a)
        })
    }
    $('#navigasi_menu_reseponsive > li').each(function(){
        var $li = $(this), $a = $li.children('a');
        if($li.is(':has(ul)')){
            var $group = $('<optgroup />', {
                label: $a.text()
            }).appendTo($select);
            addGroup($group, $li.children('ul'));
        } else {
            add($select, $a)
        }
    })
    $("nav select").change(function () {
        window.location = $(this).find("option:selected").val();
    });
    $('#navigasi_menu_reseponsive').remove();
});

演示：Fiddle

Answer 3

演示

$('.sub-menu li').prepend('--');

更新

演示

$('.sub-menu li a').prepend('--')