当前位置: 首页 > 知识库问答 >
问题:

是否可以编辑此jQuery函数以仅应用于具有子项的li项?

施文彬
2023-03-14

在我的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),以便我可以将它们设置为显示:当菜单以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个答案

慕容灿
2023-03-14

您应该能够通过以下方式完成此任务:

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

它将选择每个li具有ulli作为移动菜单中

 类似资料:
  • 问题内容: 假设我通过创建共享对象并使用LD_PRELOAD首先加载它来替换函数。是否有可能使该功能的参数不同于原始库中的参数? 例如,如果我替换 pthread_mutex_lock ,这样它将代替参数 pthread_mutex_t 而是使用 pthread_my_mutex_t 。可能吗? 其次,除了函数之外,是否可以使用LD_PRELOAD更改结构声明?例如,可以向结构中增加一个字段。 问

  • 阅读文档时,并不十分清楚。 我想要的是能够存储和检索简单的json文档。使用CloudSearch,似乎可以以SDF格式存储文档,然后搜索它们,但它只返回文档ID和指定字段的一小部分(我认为是200个字符)。 有没有一种方法来检索完整的文档ID只是使用CloudSearch?还是打算作为搜索和使用主存储服务的附加工具?

  • 问题内容: 我记得在Oracle中可以基于函数进行索引,例如。 MySQL支持吗?如果没有,还有其他选择吗? 问题答案: 不,不是一般意义上的,我什至不认为5.6(首次编写此答案时的最新版本)具有此功能。值得注意的是,8.0.13及更高版本现在支持功能索引,使您无需下面所述的触发方法即可实现所需的功能。 有关更多详细信息,请参见https://dev.mysql.com/doc/refman/8.

  • 我有一个JavaFX TableView,它有两列。此表使用观察列表作为其模型。 我想将其中一个设置为可编辑,另一个设置为不可编辑。 首先,我尝试了FXML方法: 但这不管用。表格始终不可编辑。 我还尝试了java方式: 但这也不管用。所有的桌子都不能修改。 如果TableColumn有一个可编辑的属性,那么它应该可以单独设置。 如果你知道我哪里做错了,请帮帮我。谢谢。 PS:measureNum

  • 问题内容: 我不确定如何更清楚地表达我的问题。基本上,PyPlot是否限于一个实例/窗口?我尝试的任何破解或变通办法要么导致程序冻结,要么使第二个pyplot窗口排队,直到第一个关闭。 问题答案: 当然,只需打开一个新图即可: 如果您在默认的python解释器中运行此命令,则此命令将无效,因为每个图形都需要输入gui的mainloop。如果要在交互式shell中运行事物,请查看IPython。但是

  • 问题内容: 我想使用Streams.intRange(int start,int end,int step)实现反向排序的流。但是,似乎java.util.Streams类不再可用(但是它仍在标准库的rt.jar中)。此方法是在其他类中还是被其他方法替代? 问题答案: 实际上,JDK中再也没有这种方法了。您能获得的下一个最接近的位置是,但是只会一步一步走。 一种解决方案是实施您自己的解决方案。例如