Question

我正在尝试将手风琴功能集成到wordpress菜单中。

我遇到了一个代码，但它并没有给我充分的期望（不是真正的js guru）。

这是html代码：

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>
        </nav>

        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Foundation</label></li>
                <li><a href="#">Option 1</a></li>
                <li><a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a></li>

                <ul class="off-canvas-submenu">
                    <li><a href="#">Sub menu 1</a></li>
                    <li><a href="#">Sub menu 2</a></li>
                    <li><a href="#">Sub menu 3</a></li>
                </ul>

                <li><a href="#">Option 3</a></li>
                <li><a href="#" class="off-canvas-submenu-call">Option 4 <span class="right"> + </span></a></li>

                <ul class="off-canvas-submenu">
                    <li><a href="#">Sub menu 1</a></li>
                    <li><a href="#">Sub menu 2</a></li>
                    <li><a href="#">Sub menu 3</a></li>
                </ul>

                <li><a href="#">Option 5</a></li>
                <li><a href="#">Option 6</a></li>

            </ul>
        </aside>

    <section class="main-section">
    Content

    </section>

    <a class="exit-off-canvas"></a>

    </div>
</div>

这里是jscript：

   $(document).foundation();
            $(".off-canvas-submenu").hide();
                $(".off-canvas-submenu-call").click(function() {
                     var icon = $(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
                     $(this).parent().next(".off-canvas-submenu").slideToggle('fast');
                     $(this).find("span").text(icon);
                });

这只适用于静态页面，也适用于wordpress，但是当你点击菜单中的项目时，所有带子菜单的li都会打开，而不是一次打开一个。注意菜单的html结构：

<aside class="left-off-canvas-menu">
    <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">Option 1</a></li>
        <li><a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a></li>

        <ul class="off-canvas-submenu">
            <li><a href="#">Sub menu 1</a></li>
            <li><a href="#">Sub menu 2</a></li>
            <li><a href="#">Sub menu 3</a></li>
        </ul>

        <li><a href="#">Option 3</a></li>
        <li><a href="#" class="off-canvas-submenu-call">Option 4 <span class="right"> + </span></a></li>

        <ul class="off-canvas-submenu">
            <li><a href="#">Sub menu 1</a></li>
            <li><a href="#">Sub menu 2</a></li>
            <li><a href="#">Sub menu 3</a></li>
        </ul>

        <li><a href="#">Option 5</a></li>
        <li><a href="#">Option 6</a></li>

    </ul>
</aside>

ul子菜单与li菜单处于同一级别。

在wordpress中，ul.submenu位于父li菜单中。

<aside class="left-off-canvas-menu">
    <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">Option 1</a></li>
        <li>
            <a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a>
            <ul class="off-canvas-submenu">
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
                <li><a href="#">Sub menu 3</a></li>
            </ul>
        </li>
    </ul>
</aside>

当前的代码实际上有点工作，但我们不想只点击一个li就打开所有的子代码。

这是codepen

Answer 1

$(document).foundation();
$(".off-canvas-submenu").hide();
$(".off-canvas-submenu-call").click(function() {
            var icon = $(this).parent().find(".off-canvas-submenu").is(':visible') ? '+' : '-';
            $(this).parent().find(".off-canvas-submenu").slideToggle('fast');
            $(this).find("span").text(icon);
});

使用.find()以这种方式工作，你需要设置.off-canvas-submenu的样式，因为它不再与其他元素处于同一级别，因为它不继承第一级{{1}的样式但总的来说，你应该对我好。

修改

适用于多个子菜单

<ul>

wordpress基础手风琴移动子菜单

1 个答案: