Javascript Doubletaptogo响应式功能表在手机上不起作用
我在一个网站上工作,我在移动视图导航方面遇到了问题。我正在使用这个插件:。在加载父链接之前,需要连续点击两次,点击一次即可显示子链接。当我有一个只有插件和徽标的空白页面时,插件工作得非常完美 当我试图在导航和徽标所在的行上方添加任何内容时,就会出现问题。当我在其上方添加任何其他内容时,单击父链接将打开其上方父链接2的下拉列表。例如,当我单击导航中的“Workshops”时,“News”下的下拉菜单打开。只有在实际设备上预览时才会发生这种情况,在本例中是在iOS7上 如果我仅将此作为HTML标记,则它可以工作:Javascript Doubletaptogo响应式功能表在手机上不起作用,javascript,jquery,ios,responsive-design,Javascript,Jquery,Ios,Responsive Design,我在一个网站上工作,我在移动视图导航方面遇到了问题。我正在使用这个插件:。在加载父链接之前,需要连续点击两次,点击一次即可显示子链接。当我有一个只有插件和徽标的空白页面时,插件工作得非常完美 当我试图在导航和徽标所在的行上方添加任何内容时,就会出现问题。当我在其上方添加任何其他内容时,单击父链接将打开其上方父链接2的下拉列表。例如,当我单击导航中的“Workshops”时,“News”下的下拉菜单打开。只有在实际设备上预览时才会发生这种情况,在本例中是在iOS7上 如果我仅将此作为HTML标记,
<div class="row">
<div class="small-9 medium-5 large-4 columns" id="logo"> <a href="index.php"><img src="http://192.185.122.20/~aljlaw/images/pageLayout/JalozaA-banner.svg" alt="Jaloza & Associates" title="Jaloza & Associates"></a>
</div>
<div class="small-3 medium-12 large-8 columns">
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li><a href="index.php" title="Home" aria-haspopup="false">Home</a>
</li>
<li><a href="Practice-Areas.php" aria-haspopup="true">Practice Areas</a>
<ul>
<li><a href="Estate-Planning.php">Estate Planning Fundamentals</a>
</li>
<li><a href="Elder-Law.php">Long-Term Care Planning/Medicaid</a>
</li>
<li><a href="Veterans-Aid-Attendance.php">Veterans Benefits</a>
</li>
<li><a href="Probate.php">Probate & Estate Administration</a>
</li>
<li><a href="Charitable-Planning.php">Charitable Planning</a>
</li>
<li><a href="Special-Needs-Planning.php">Special Needs Planning</a>
</li>
<li><a href="Estate-Tax-Planning.php">Estate Tax Planning</a>
</li>
<li><a href="Business-Planning.php">Business Succession Planning</a>
</li>
<li><a href="Medicaid-Planning.php">Medicaid Crisis Planning</a>
</li>
<li><a href="Asset-Protection.php">Asset Protection</a>
</li>
</ul>
</li>
<li><a href="Estate-Planning-newsletters.php" aria-haspopup="true">News</a>
<ul>
<li><a href="Estate-Planning-newsletters-Archive.php">Index & Archive</a>
</li>
</ul>
</li>
<li><a href="Estate-Planning-Consult.php" aria-haspopup="true">Becoming a Client</a>
<ul>
<li><a href="Estate-Planning-Consult-Form.php">Request a Consultation</a>
</li>
<li><a href="Financial-Professionals.php">For Professional Advisors</a>
</li>
<li><a href="Estate-Planning-FAQ.php">FAQ</a>
</li>
</ul>
</li>
<li><a href="Estate-Planning-workshops.php" aria-haspopup="true">Workshops</a>
<ul>
<li><a href="Estate-Planning-workhops-Registration.php">Workshop Registration</a>
</li>
</ul>
</li>
<li><a href="about-Us.php" aria-haspopup="true">About</a>
<ul>
<li><a href="aboutUs-Andrew-Jaloza.php">Andrew Jaloza</a>
</li>
</ul>
</li>
<li><a href="Contact-Us.php" aria-haspopup="false">Contact</a>
</li>
</ul>
</nav>
</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
但在该行之前添加任何内容都会导致问题。
下面是一个JSFIDLE以查看示例:
对于doubletaptogo的问题,我已经在这里查看了其他问题/答案,但没有一个问题/答案与doubletaptogo相同。提前感谢您的帮助或建议 您是否添加了jquery:
<script type="text/javascript">
$(function () {
$('#nav li:has(ul)').doubleTapToGo();
});
</script>
$(函数(){
$('#nav li:has(ul)')。doubleTapToGo();
});
谢谢,我想我已经明白了。我将整个标题包装在一个div中,该div绝对只用于移动设备。不知道为什么,但这起作用了
所以看起来是这样的:
<div id="header">
<div id="header-wrapper">
<!--Logo code-->
<!--Navigation code-->
</div>
</div>
我也一直在想办法
事实证明,doubletaptogo.js只在导航位于页面顶部时才起作用,没有办法解决这个问题;如果导航低于任何其他内容(如标题等),请忘记使用此脚本,因为它将始终导致导航跳转到页面顶部。我知道这没有多大帮助,但在使用safari的iOS 7.1上,小提琴对我来说非常有用。请尝试在其周围添加一个包装div,并绝对定位它。这让我可以在页面导航上方添加其他内容。这不起作用,如果我定位绝对位置,它会把一切都搞砸!
#header-wrapper {position:relative;}
@media only screen and ( max-width: 40em ) /* small */ {
#header-wrapper{position: absolute;}
}