gpt4 book ai didi

javascript - Doubletaptogo 响应式菜单在手机上不起作用

转载 作者:塔克拉玛干 更新时间:2023-11-02 08:18:37 24 4
gpt4 key购买 nike

我在网站上工作时遇到移动 View 导航问题。我正在使用这个插件:http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly .在加载父链接之前,它应该需要连续点击两次,点击一次显示子链接。当我有一个只有插件和 Logo 的空白页面时,插件可以完美运行。

当我尝试在导航和 Logo 所在的行上方添加任何内容时,就会出现问题。当我在其上方添加任何其他内容时,单击父链接会打开其上方父链接 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 &amp; Associates" title="Jaloza &amp; 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 &amp; 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 &amp; 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>

但是在该行之前添加任何内容都会导致问题。这是一个用于查看示例的 jsfiddle:http://jsfiddle.net/t4YE5/

我已经在此处查看了有关 doubletaptogo 问题的其他问题/答案,但它们似乎都没有相同的问题。在此先感谢您的任何帮助或建议!

最佳答案

谢谢,我想我明白了。我将整个 header 包裹在一个 div 中,该 div 绝对定位为仅适用于移动设备。不知道为什么,但这奏效了。

所以它看起来像这样:

<div id="header">
<div id="header-wrapper">
<!--Logo code-->
<!--Navigation code-->
</div>
</div>

我添加的 css 是:

#header-wrapper {position:relative;}
@media only screen and ( max-width: 40em ) /* small */ {
#header-wrapper{position: absolute;}
}

关于javascript - Doubletaptogo 响应式菜单在手机上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22462608/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com