jQuery accordion menu

时间：2016-04-19 作者：Arete

因此，我刚刚开始开发一个以\\s（下划线）为基础的主题。连续三天（几乎）我一直在尝试制作一份类似这样的手风琴菜单：

示例：https://codyhouse.co/demo/multi-level-accordion-menu/animated.html

我知道我必须使用jQuery，但我以前从未使用过jQuery，我不知道如何在Wordpress中“集成”jQuery脚本。

我知道我必须相应地设置菜单样式，但我不知道该怎么做，因为我的菜单php代码似乎只是自动生成类

*<?php wp_nav_menu(array( \'theme_location\' => \'primary\', \'sort_column\' => \'menu_order\', \'menu\' => \'Categories\', \'container_class\' => \'main-menu\', \'menu_id\' => \'primary-menu\' ) ); ?>

所以基本上我想说的是，我想要示例中的菜单，但我不知道如何在wordpress中实现它。我不希望任何人直接把代码交给我，但老实说，我会很感激这里的任何帮助。我很绝望，我真的尽力了！

如果有人能帮我，我将不胜感激！

这就是我目前所拥有的。

header.php

<div class="menu-container">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <?php wp_nav_menu(array(
        \'theme_location\' => \'primary\',
        \'sort_column\' => \'menu_order\',
        \'menu\' => \'Categories\',
        \'container_class\' => \'main-menu\',
        \'menu_id\' => \'primary-menu\'
        ) ); ?>
    </nav><!-- #site-navigation -->
</div><!-- #menu-container -->
呈现的HTML（介于<nav> 和</nav>)

<nav id="site-navigation" class="main-navigation" role="navigation">
                <div class="main-menu"><ul id="primary-menu" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1046"><a href="#">Pages</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1695"><a href="http://localhost/about/page-image-alignment/">Page Image Alignment</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1693"><a href="http://localhost/about/page-image-alignment/">Page Image Alignment</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1696"><a href="http://localhost/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1694"><a href="http://localhost/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1047"><a href="#">Categories</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1048"><a href="http://localhost/category/markup/">Markup</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1050"><a href="http://localhost/category/unpublished/">Unpublished</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1051"><a href="#">Depth</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1052"><a href="#">Level 01</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1053"><a href="#">Level 02</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1054"><a href="#">Level 03</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1055"><a href="#">Level 04</a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1056"><a href="#">Level 05</a>
                    <ul class="sub-menu">
                        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1057"><a href="#">Level 06</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1058"><a href="#">Level 07</a>
                            <ul class="sub-menu">
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1059"><a href="#">Level 08</a>
                                <ul class="sub-menu">
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1060"><a href="#">Level 09</a>
                                    <ul class="sub-menu">
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1061"><a href="#">Level 10</a></li>
                                    </ul>
</li>
                                </ul>
</li>
                            </ul>
</li>
                        </ul>
</li>
                    </ul>
</li>
                </ul>
</li>
            </ul>
</li>
        </ul>
</li>
    </ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1062"><a href="#">Advanced</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1064"><a title="Custom Title Attribute" href="#">Menu Title Attribute</a></li>
    <li class="custom-menu-css-class menu-item menu-item-type-custom menu-item-object-custom menu-item-1065"><a href="#">Menu CSS Class</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1066"><a target="_blank" href="http://apple.com">New Window / Tab</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1063"><a href="#">Menu Description</a></li>
</ul></div>         </nav>
style.css （仅零件样式导航）

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    width: 100%;
}

.main-navigation li {
    float: left;
    position: relative;
    width: inherit;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

.menu-toggle {
    display: none;
}
.main-navigation ul {
    display: block;
}


.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

1 个回复
SO网友:Nabeel Khan

添加menu_class 值为的参数cd-accordion-menu ，使其看起来像这样：

<div class="menu-container">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <?php wp_nav_menu(array(
        \'theme_location\' => \'primary\',
        \'sort_column\' => \'menu_order\',
        \'menu\' => \'Categories\',
        \'container_class\' => \'main-menu\',
        \'menu_id\' => \'primary-menu\',
        \'menu_class\' => \'cd-accordion-menu\'
        ) ); ?>
    </nav><!-- #site-navigation -->
</div><!-- #menu-container -->
您可以在此处看到更多要更改的选项：https://developer.wordpress.org/reference/functions/wp_nav_menu/

关于学习jQuery，这真的很容易。只需转到http://api.jquery.com/ 并尽可能多地阅读左侧菜单中的页面。这肯定会有帮助。

要将jQuery与WordPress结合使用，最好将其排队，以防止源代码中重复添加导致的冲突。（请在此处阅读更多信息：https://developer.wordpress.org/reference/functions/wp_enqueue_script/ )

标签： php   theme-development   jquery   css   小码农  

相关推荐

未捕获的ReferenceError：未定义jQuery-尽管已加载jQuery

我知道这是一个讨论得很好的问题，但我没有找到我的问题的任何答案。我在Wordpress页面上有以下代码（内联，此项目所需）：<script> (function ($) { $(document).ready(function () { $(\'.choosekurs\').on(\'click\', function() { $(\'textarea[name="textarea"]\').text($(th