将菜单修正为响应菜单。css/jquery
将菜单修正为响应菜单。css/jquery
提问于 2014-05-14 22:45:26
我一直在使用flaunt.js ( 原始源 )，但是修改了初始的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>小提琴
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-14 23:44:18
您已经删除了必要的HTML，并且没有在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/。我不知道为什么您这么热衷于在没有任何类的情况下做任何事情。我只想减少标记，但我觉得这将是一个很难维护的问题(或者仅仅是让你头脑清醒)。最后，箭头不会在任何这些Fiddle中显示，因为它是一个图像。
Stack Overflow用户
发布于 2014-05-15 13:38:45
我已经在http://jsfiddle.net/WdN8J/10/上修改了您的示例代码。在Chrome中，有初始填充偏移量，所以我将-webkit-填充-start: 0px。矛盾的是，你的下拉导航器有绝对的位置：
.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}因此，我在单击操作中添加了以下行：
$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23666419
复制相关文章
相似问题
腾讯云开发者
