0

我正在使用以下代码将标准导航转换为 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 前面加上“-”，以便我的列表如下所示：

去...

类别（这将是父级）

-- 内部（这将是带有 '-' 的孩子）

-- 作品集（这将是带有'-'的孩子）

- 生活方式

- 例子

ETC...

有人可以帮忙吗？谢谢

4

3 回答 3

0

像这样？

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

$('ul.sub-menu li a').each(function(index, item) {
    $(this).text('--' + $(this).text());
});
于 2013-08-27T15:51:15.930 回答
0

演示

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

更新

演示

$('.sub-menu li a').prepend('--')
于 2013-08-27T15:53:52.220 回答
0

尝试

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();

});

演示：小提琴

于 2013-08-27T15:55:28.073 回答