javascript - 将菜单修复为响应式菜单.. css/jquery

Question

我一直在使用 flaunt.js ( Original Source ，但修改了初始的 css 和 html。

我已经从 ul 和 li 中删除了类样式，所以它只使用列表标签。

但出于某种原因，当我进入移动设备时......它在我的本地页面上显示了 3 行菜单按钮，但是当我单击它时......事情不像在源代码中那样工作。

我看不到菜单。我看不到显示下拉菜单的箭头。

如果有人可以帮忙

谢谢

<nav class="nav">
    <ul>
        <li>
            <a href="?=home">Home</a>
            <ul>
                <li >
                    <a href="?=submenu-1">Submenu item 1</a>
                </li>
                <li >
                    <a href="?=submenu-2">Submenu item 2</a>
                </li>
                <li >
                    <a href="?=submenu-3">Submenu item 3</a>
                </li>
                <li >
                    <a href="?=submenu-4">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="?=about">About</a>
        </li>
        <li>
            <a href="?=services">Services</a>
            <ul>
                <li >
                    <a href="?=submenu-1">Submenu item 1</a>
                </li>
                <li >
                    <a href="?=submenu-2">Submenu item 2</a>
                </li>
                <li >
                    <a href="?=submenu-3">Submenu item 3</a>
                </li>
                <li >
                    <a href="?=submenu-4">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="?=portfolio">Portfolio</a>
        </li>
        <li >
            <a href="?=testimonials">Testimonials</a>
        </li>
        <li>
            <a href="?=contact">Contact</a>
        </li>
    </ul>
</nav>

Fiddle

Answer 1

您已经删除了必要的 HTML 并且没有在 JS 中对其进行补偿

原始 JS:

        // Append the mobile icon nav
        $('.nav').append($('<div class="nav-mobile"></div>'));

        // Add a <span> to every .nav-item that has a <ul> inside
        $('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');

你修改后的 JS:

        // Append the mobile icon nav
        $('.nav').append($('<div class="nav-mobile"></div>'));

        // Add a <span> to every .nav-item that has a <ul> inside
        $('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');

查看您的选择器如何定位 .nav在两条线上？这是在脚本的其余部分不期望的地方添加跨度。在您的 JS 中将选择器更改回 .nav-item并添加 .nav-item类回到根级别 <li>

您还需要更改:

// Dynamic binding to on 'click'
$('ul').on('click', '.nav-click', function(){

收件人:

// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){

不止一个<ul>在你的标记中，所以你的毯子将点击绑定(bind)到 <ul>也在破坏事物。

编辑:修改后的 HTML、CSS 和 JS:http://jsfiddle.net/xtt3j/ .我不确定为什么您如此热衷于在没有任何类(class)的情况下做所有事情。我完全致力于减少标记，但我觉得这将更难维护(或者只是绕过你的头)。最后，箭头不会显示在任何这些 Fiddles 中，因为它是一张图片。