Question

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

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

但出于某种原因，当我进入移动设备时...它显示了我本地页面上的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>，因此您将点击绑定到<ul>也会破坏事情。

编辑：修改后的HTML，CSS和JS：http://jsfiddle.net/xtt3j/。我不确定为什么你在没有任何类的情况下如此热衷于做所有事情。我所有关于减少标记但我觉得这将更难维护（或只是包裹你的头）。最后，箭头不会显示在任何这些小提琴中，因为它是一张图像。

Answer 2

我已在http://jsfiddle.net/WdN8J/10/修改了您的示例代码。在Chrome中，有初始填充偏移，所以我把-webkit-padding-start：0px。冲突在于您的下拉导航具有绝对位置：

.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}

所以我在点击操作中添加了以下行：

$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});

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

2 个答案: