使用jQuery将选择标签附加到菜单会导致菜单在wordpress中加倍

Question

in a js file called via wp_enqueue_script i have this:

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

in my header.php i call upon the menu like this:

<?php wp_nav_menu( array(('container_id' => 'primary_menu_mobile')); ?>

The output is two menus that show up on my phone. One is a list. all links work as they should. The other is drop down with the same menu link. All links here also work as they should. Should i make a seperate menu un wordpress just like my main nav for mobility and call to it instead? I'm confused as to why the menu prints twice. I renamed the js file to see what happens without the jquery and the list ul menu still shows up.

Answer 1

If I understand your question correctly...

jQuery("#primary_menu_mobile a").each

The above code seems to imply you know you'll have it as a list of links already, so its just a matter of removing these when you are finished with the each.