Question

我试图在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

Answer 1

这是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);
    });

基础6子菜单展开不起作用

1 个答案: