代码之家 › 专栏 › 技术社区 › Ahad Porkar

Foundation 6子菜单展开不工作

zurb-foundation jquery

Ahad Porkar · 技术社区 · 9 年前

我正在尝试在MVC6+Foundation 6中部署子菜单

这是我的代码:

<div dir="rtl" style="height:100%">
    <div class="off-canvas-wrapper" style="height: 799px;">
        <div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper="" style="height: 799px;">
            <aside class="off-canvas position-right is-open" id="offCanvas" data-off-canvas="e16988-off-canvas" data-position="right" aria-hidden="false" style="height: 799px;">
                <ul class="off-canvas-list">
                            <li><a href="#" class="normal off-canvas-submenu-call">Menu one<span class="right">+</span></a> 
                                    <ul class="off-canvas-submenu" style="display: none;">
                                        <li><a href="/SubMenuOne" >SubMenu One</a></li>
                                    </ul>
                                </li>
                            <li><a href="/MenuTwo" class="normal">Menu Two </a> 
                               </li>
                </ul>
            </aside>
            <div class="main-content" data-off-canvas-content="">
                <div class="title-bar">
                    <div class="title-bar-right">
                        <button class="menu-icon" type="button" data-open="offCanvas" aria-expanded="true" aria-controls="offCanvas"></button>
                        <span class="title-bar-title">Mane List</span>
                    </div>
                </div>

                <div class="row">
                    <div class="large-12 columns">
                        <h1></h1>
                    </div>
                </div>

            <div class="js-off-canvas-exit is-visible"></div></div>

        </div>
    </div>
</div>

和Js:

<script>
        $(window)
        .load(function () {
            SetOffCanvasHeight();
        })
        .resize(function () {
            SetOffCanvasHeight();
        });

        function SetOffCanvasHeight() {
            var height = $(window).height();
            var contentHeight = $(".off-canvas-content").height();
            if (contentHeight > height) { height = contentHeight; }

            $(".off-canvas-wrapper").height(height);
            $(".off-canvas-wrapper-inner").height(height);
            $(".off-canvas").height(height);
        }
        $(".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);
        });
    </script>

上面的菜单在调试器控制台中未显示任何错误,菜单显示良好。但是,当我单击包含子菜单的菜单时,只有“+”变为“-”,子菜单不显示。

我将此示例用作指导:

http://codepen.io/designsoutheast/pen/ZYERGo

1 回复 | 直到 9 年前

Mukesh Ram 9 年前

这是jquery中的问题。将代码替换为:

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