这个jQuery函数可以编辑为仅适用于有孩子的li项吗？

时间：2016-03-11 23:50:28

标签： jquery wordpress

当我的Wordpress网站上的浏览器宽度低于1080px时，我设置了一个移动菜单，其中包含通过PHP而不是HTML配置的无序列表。我在下面有一些jQuery代码，它在菜单项后面添加了一个span标签，这样我就可以用它作为切换子菜单的方法。问题是，我想更改它，以便它只添加跨度来列出具有子页面的项目。 

jQuery(document).ready(function($) {    

$('nav.main-menu#mobile ul li').after('<span class="submenu-button">+</span>');

});

我还有另一个问题 - 我给了某些菜单项自定义类（nav.main-menu＃mobile li.hide-mobile），以便我可以将它们设置为display：none，当菜单更改为1080px的移动菜单。 jQuery也为这些添加了一个跨度，而我现在拥有的那个有子代，所以即使我对上面的代码有修复，跨度也可能会保留。有没有办法删除这个班级的跨度？

PHP我的菜单使用：

function register_menus() {
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'theme_wp' ),    
            'header' => __( 'Header Menu' ),
            'footer' => __( 'Footer Menu' )
        )
    );
}
add_action( 'init', 'register_menus' );

我的标题如下：

<header class="header">
    <div class="header-navigation">
        <!-- LOGOS -->
        <a href="http://www.mywebsite.co.uk">
        <img class="standard logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/logo.png">
        <img class="white logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/logo_white.png"></a>
        <!-- END LOGOS -->
        <!-- HEADER NAVIGATION MENU --> 
        <nav class="main-menu" id="header">
            <div class="menu-header-menu-container">
                <ul id="menu-header-menu" class="menu">
                    <li id="menu-item-1144" class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1144"><a href="http://www.mywebsite.co.uk/home/">HOME</a></li>
                    <li id="menu-item-463" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463">
                        <a href="http://www.mywebsite.co.uk/work/">WORK</a>
                        <ul class="sub-menu">
                            <li id="menu-item-584" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.co.uk/work/landscapes/">LANDSCAPES</a></li>
                            <li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-473">
                                <a href="http://www.mywebsite.co.uk/work/seascapes/">SEASCAPES</a>
                                <ul class="sub-menu">
                                    <li id="menu-item-478" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.co.uk/work/macro/">MACRO</a></li>
                                    <li id="menu-item-477" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.co.uk/work/cities/">CITIES</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-475" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.mywebsite.co.uk/work/long-exposure/">LONG EXPOSURE</a></li>
                            <li id="menu-item-480" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.co.uk/work/miscellaneous/">MISCELLANEOUS</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.mywebsite.co.uk/about/">ABOUT</a></li>
                    <li id="menu-item-464" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.mywebsite.co.uk/shop/">SHOP</a></li>
                    <li id="menu-item-923" class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923">
                        <a href="#">SOCIAL</a>
                        <ul class="sub-menu">
                            <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">FACEBOOK</a></li>
                            <li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="#">INSTAGRAM</a></li>
                            <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="https://www.mywebsite.co.uk/">FLICKR</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="www.mywebsite.co.uk">CONTACT</a></li>
                </ul>
            </div>
        </nav>
        <!-- END HEADER NAVIGATION MENU --> 
        <span class="menu-button"></span>
    </div>
    <!--END HEADER NAVIGATION -->
    <!-- MOBILE NAVIGATION MENU -->
    <div class="mobile-menu">
        <nav class="main-menu" id="mobile">
            <h6 id="titleheading">MENU</h6>
            <div class="menu-header-menu-container">
                <ul id="menu-header-menu-1" class="menu">
                    <li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1144"><a href="http://www.mywebsite.co.uk/home/">HOME</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463">
                        <a href="http://www.mywebsite.co.uk/work/">WORK</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.co.uk/work/landscapes/">LANDSCAPES</a></li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-473">
                                <a href="http://www.mywebsite.co.uk/work/seascapes/">SEASCAPES</a>
                                <ul class="sub-menu">
                                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.co.uk/work/macro/">MACRO</a></li>
                                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.co.uk/work/cities/">CITIES</a></li>
                                </ul>
                            </li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.mywebsite.co.uk/work/long-exposure/">LONG EXPOSURE</a></li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.co.uk/work/miscellaneous/">MISCELLANEOUS</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.mywebsite.co.uk/about/">ABOUT</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.mywebsite.co.uk/shop/">SHOP</a></li>
                    <li class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923">
                        <a href="#">SOCIAL</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">FACEBOOK</a></li>
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="#">INSTAGRAM</a></li>
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="www.mywebsite.co.uk">FLICKR</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.mywebsite.co.uk/contact/">CONTACT</a></li>
                </ul>
            </div>
        </nav>
        <nav class="social-menu" id="mobile">
            <div class="menu-social-menu-container">
                <ul id="menu-social-menu" class="menu">
                    <li id="menu-item-948" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-948"><a href="#"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_black.png" height=30 width=30> <img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_white.png" height=30 width=30></a></li>
                    <li id="menu-item-947" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-947"><a target="_blank" href="www.mywebsite.co.uk"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_black.png" height=30 width=30><img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_white.png" height=30 width=30></a></li>
                    <li id="menu-item-949" class="menu-item menu-item-type-c www.mywebsite.co.uk"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_black.png" height=30 width=30> <img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_white.png" height=30 width=30></a></li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- END MOBILE NAVIGATION MENU -->
</header>

1 个答案:

答案 0 :(得分：1)

你应该能够用这个完成它：

$('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li').after('<span class="submenu-button">+</span>');

它会在li内选择ul child作为mobile menu的每个EXCEPTION: Attempt to detect changes on a dehydrated detector.

相关问题
最新问题