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

DEMO

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

更新

DEMO

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

Answer 3

尝试

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

为导航创建选项“子菜单”

3 个答案: