当链接在href中具有哈希值时，链接仅在移动设备上切换 - jquery
[英]links only toggle on mobile when link has hash in href - jquery
问题描述
Trying to make it so that the navigation links with children toggle open before you are taken to that page.
试图使带有孩子的导航链接在您进入该页面之前切换打开。 Right now, code below only goes straight to page even if the parent has children.现在，即使父母有孩子，下面的代码也只会直接进入页面。 Thoughts?想法？
UPDATED SOLUTION (jQuery):更新的解决方案（jQuery）：
jQuery(window).on('resize', function () {
jQuery('.main-navigation ul li a').toggleClass('toggleClass', jQuery(window).width() < 991);
}).trigger('resize')
jQuery('.main-navigation li a.toggleClass').click(function(e){
var cl = jQuery(this).data('push');
if(!cl){
e.preventDefault();
jQuery(this).next('ul').slideToggle();
jQuery(this).data('push',true)
}
});
UPDATED SOLUTION (CSS):更新的解决方案（CSS）：
.main-navigation li ul {
display:none;
}
Here's the HTML:这是 HTML：
<nav class="main-navigation toggleactive" style="overflow: hidden; display: block;">
<ul>
<li title="Home">
<a href="/index.php/home/">Home</a>
</li>
<li class="dropdown-1" title="Rentals">
<a href="/index.php/rentals/">Rentals</a>
<ul class="level2">
<li title="Chico">
<a href="/index.php/rentals/chico/">Chico</a>
<ul class="level3">
<li title="Campbell Commons">
<a href="/index.php/rentals/chico/campbell-commons/">Campbell Commons</a>
</li>
<li title="East of Eaton">
<a href="/index.php/rentals/chico/east-of-eaton/">East of Eaton</a>
</li>
<li title="La Vista Verde">
<a href="/index.php/rentals/chico/la-vista-verde/">La Vista Verde</a>
</li>
<li title="Longfellow Apartments">
<a href="/index.php/rentals/chico/longfellow-apartments/">Longfellow Apartments</a>
</li>
<li title="Lucian Manor Senior Apartments">
<a href="/index.php/rentals/chico/lucian-manor-senior-apartments/">Lucian Manor Senior Apartments</a>
</li>
<li title="Murphy Commons">
<a href="/index.php/rentals/chico/murphy-commons/">Murphy Commons</a>
</li>
<li title="North Point Apartments">
<a href="/index.php/rentals/chico/north-point-apartments/">North Point Apartments</a>
</li>
</ul>
</li>
<li title="Gridley">
<a href="/index.php/rentals/gridley/">Gridley</a>
<ul class="level3">
<li title="Hazel Hotel">
<a href="/index.php/rentals/gridley/hazel-hotel/">Hazel Hotel</a>
</li>
</ul>
</li>
<li title="Hamilton City">
<a href="/index.php/rentals/hamilton-city/">Hamilton City</a>
<ul class="level3">
<li title="Las Palmas Apartments">
<a href="/index.php/rentals/hamilton-city/las-palmas-apartments/">Las Palmas Apartments</a>
</li>
<li title="Shotover Inn Apartments">
<a href="/index.php/rentals/hamilton-city/shotover-inn-apartments/">Shotover Inn Apartments</a>
</li>
</ul>
</li>
<li title="Live Oak">
<a href="/index.php/rentals/live-oak/">Live Oak</a>
<ul class="level3">
<li title="Maple Park Apartments, Phase 1">
<a href="/index.php/rentals/live-oak/maple-park-apartments/">Maple Park Apartments, Phase 1</a>
</li>
<li title="Maple Park Senior Apartments">
<a href="/index.php/rentals/live-oak/maple-park-apartments-phase-2/">Maple Park Senior Apartments</a>
</li>
</ul>
</li>
<li title="Marysville">
<a href="/index.php/rentals/marysville/">Marysville</a>
<ul class="level3">
<li title="Marymead Park">
<a href="/index.php/rentals/marysville/marymead-park/">Marymead Park</a>
</li>
</ul>
</li>
<li title="Orland">
<a href="/index.php/rentals/orland/">Orland</a>
<ul class="level3">
<li title="Rancho de Soto Apartments">
<a href="/index.php/rentals/orland/rancho-de-soto-apartments/">Rancho de Soto Apartments</a>
</li>
</ul>
</li>
<li title="Paradise">
<a href="/index.php/rentals/paradise/">Paradise</a>
<ul class="level3">
<li title="Paradise Community Village">
<a href="/index.php/rentals/paradise/paradise-community-village/">Paradise Community Village</a>
</li>
</ul>
</li>
<li title="Red Bluff">
<a href="/index.php/rentals/red-bluff/">Red Bluff</a>
<ul class="level3">
<li title="Brickyard Creek Apartments">
<a href="/index.php/rentals/red-bluff/brickyard-creek-apartments/">Brickyard Creek Apartments</a>
</li>
</ul>
</li>
<li title="Redding">
<a href="/index.php/rentals/redding/">Redding</a>
<ul class="level3">
<li title="Linden Apartments">
<a href="/index.php/rentals/redding/linden-apartments/">Linden Apartments</a>
</li>
</ul>
</li>
</ul>
</li>
<li title="News">
<a href="/index.php/news/">News</a>
</li>
<li class="dropdown-1" title="Home Ownership">
<a href="/index.php/home-ownership/">Home Ownership</a>
<ul class="level2">
<li title="Active Developments">
<a href="/index.php/home-ownership/active-developments/">Active Developments</a>
<ul class="level3">
<li title="Biggs Estates">
<a href="/index.php/home-ownership/active-developments/biggs-estates/">Biggs Estates</a>
</li>
<li title="Calle Vista">
<a href="/index.php/home-ownership/active-developments/calle-vista/">Calle Vista</a>
</li>
<li title="Villa La Michele III">
<a href="/index.php/home-ownership/active-developments/villa-la-michele-iii/">Villa La Michele III</a>
</li>
<li title="Sierra Vista">
<a href="/index.php/home-ownership/active-developments/sierra-vista/">Sierra Vista</a>
</li>
<li title="Sierra Vista 2">
<a href="/index.php/home-ownership/active-developments/sierra-vista-2/">Sierra Vista 2</a>
</li>
<li title="Siskiyou Grove">
<a href="/index.php/home-ownership/active-developments/siskiyou-grove/">Siskiyou Grove</a>
</li>
</ul>
</li>
<li title="Past Developments">
<a href="/index.php/home-ownership/past-developments/">Past Developments</a>
</li>
<li title="How to Bid on CHIP Projects">
<a href="/index.php/home-ownership/how-to-bid-on-chip-projects/">How to Bid on CHIP Projects</a>
</li>
<li title="Homebuyer Education">
<a href="/index.php/home-ownership/homebuyer-education/">Homebuyer Education</a>
</li>
</ul>
</li>
<li title="Jobs">
<a href="/index.php/jobs/">Jobs</a>
</li>
<li title="About Us">
<a href="/index.php/about-us/">About Us</a>
<ul class="level2">
<li title="Leadership">
<a href="/index.php/about-us/leadership/">Leadership</a>
</li>
</ul>
</li>
</ul>
</nav>
3 个解决方案
解决方案1
1 已采纳 2016-09-28 21:48:58
If you don't want to lose the gotolink behavior using preventDefault one way is to control the button like:如果您不想使用preventDefault丢失 gotolink 行为，一种方法是控制按钮，如：
- On first click toggle the submenu第一次点击切换子菜单
- On second click go to the link第二次点击转到链接
$('.main-navigation li a').click(function(e){ var cl = $(this).data('push'); if(!cl){ e.preventDefault(); $(this).next('ul').slideToggle(); $(this).data('push',true) } });
li ul { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="main-navigation"> <ul> <li class="dropdown-1" title="Rentals"> <a href="http://...">Rentals</a> <ul class="level2"> <li title="Chico"> <a href="http://...">Chico</a> <ul class="level3"> <li title="Campbell Commons"> <a href="http://...">Campbell Commons</a> </li> </ul> </li> </ul> </li> </ul> </nav>
解决方案2
0 2016-09-28 21:39:23
You need to prevent default behavior of the click on <a> .您需要防止点击<a>默认行为。 Something like this.像这样的东西。
$('.main-navigation li a').click(function(e){
e.preventDefault(); //e is click event
$(this).next('ul').slideToggle();
return false; //just in case
});
解决方案3
0 2016-09-28 22:51:27
You need to hide those li level .你需要隐藏那些 li 级别。 I see li level1,level2 so we need to hide them first.我看到 li level1,level2 所以我们需要先隐藏它们。 and jQuery you just forget to add e.preventDefault() function which stops the default action of an element from happening.So that the 2 mistake nothing else.和 jQuery 你只是忘记添加 e.preventDefault() 函数来阻止元素的默认操作发生。所以 2 没有别的错误。 Now you can use your code to.现在您可以使用您的代码。 with your jQueryLiveFiddle .使用您的jQueryLiveFiddle 。 In here I just use toggle .在这里，我只使用 toggle 。
$(document).ready(function() { $('ul li a').click(function(e) { $(this).next('ul').toggle('blind');; e.preventDefault(); }) });
.level2, .level3 { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <nav class="main-navigation toggleactive" style="overflow: hidden; display: block;"> <ul> <li title="Home"> <a href="/index.php/home/">Home</a> </li> <li class="dropdown-1" title="Rentals"> <a href="/index.php/rentals/">Rentals</a> <ul class="level2"> <li title="Chico"> <a href="/index.php/rentals/chico/">Chico</a> <ul class="level3"> <li title="Campbell Commons"> <a href="/index.php/rentals/chico/campbell-commons/">Campbell Commons</a> </li> <li title="East of Eaton"> <a href="/index.php/rentals/chico/east-of-eaton/">East of Eaton</a> </li> <li title="La Vista Verde"> <a href="/index.php/rentals/chico/la-vista-verde/">La Vista Verde</a> </li> <li title="Longfellow Apartments"> <a href="/index.php/rentals/chico/longfellow-apartments/">Longfellow Apartments</a> </li> <li title="Lucian Manor Senior Apartments"> <a href="/index.php/rentals/chico/lucian-manor-senior-apartments/">Lucian Manor Senior Apartments</a> </li> <li title="Murphy Commons"> <a href="/index.php/rentals/chico/murphy-commons/">Murphy Commons</a> </li> <li title="North Point Apartments"> <a href="/index.php/rentals/chico/north-point-apartments/">North Point Apartments</a> </li> </ul> </li> <li title="Gridley"> <a href="/index.php/rentals/gridley/">Gridley</a> <ul class="level3"> <li title="Hazel Hotel"> <a href="/index.php/rentals/gridley/hazel-hotel/">Hazel Hotel</a> </li> </ul> </li> <li title="Hamilton City"> <a href="/index.php/rentals/hamilton-city/">Hamilton City</a> <ul class="level3"> <li title="Las Palmas Apartments"> <a href="/index.php/rentals/hamilton-city/las-palmas-apartments/">Las Palmas Apartments</a> </li> <li title="Shotover Inn Apartments"> <a href="/index.php/rentals/hamilton-city/shotover-inn-apartments/">Shotover Inn Apartments</a> </li> </ul> </li> <li title="Live Oak"> <a href="/index.php/rentals/live-oak/">Live Oak</a> <ul class="level3"> <li title="Maple Park Apartments, Phase 1"> <a href="/index.php/rentals/live-oak/maple-park-apartments/">Maple Park Apartments, Phase 1</a> </li> <li title="Maple Park Senior Apartments"> <a href="/index.php/rentals/live-oak/maple-park-apartments-phase-2/">Maple Park Senior Apartments</a> </li> </ul> </li> <li title="Marysville"> <a href="/index.php/rentals/marysville/">Marysville</a> <ul class="level3"> <li title="Marymead Park"> <a href="/index.php/rentals/marysville/marymead-park/">Marymead Park</a> </li> </ul> </li> <li title="Orland"> <a href="/index.php/rentals/orland/">Orland</a> <ul class="level3"> <li title="Rancho de Soto Apartments"> <a href="/index.php/rentals/orland/rancho-de-soto-apartments/">Rancho de Soto Apartments</a> </li> </ul> </li> <li title="Paradise"> <a href="/index.php/rentals/paradise/">Paradise</a> <ul class="level3"> <li title="Paradise Community Village"> <a href="/index.php/rentals/paradise/paradise-community-village/">Paradise Community Village</a> </li> </ul> </li> <li title="Red Bluff"> <a href="/index.php/rentals/red-bluff/">Red Bluff</a> <ul class="level3"> <li title="Brickyard Creek Apartments"> <a href="/index.php/rentals/red-bluff/brickyard-creek-apartments/">Brickyard Creek Apartments</a> </li> </ul> </li> <li title="Redding"> <a href="/index.php/rentals/redding/">Redding</a> <ul class="level3"> <li title="Linden Apartments"> <a href="/index.php/rentals/redding/linden-apartments/">Linden Apartments</a> </li> </ul> </li> </ul> </li> <li title="News"> <a href="/index.php/news/">News</a> </li> <li class="dropdown-1" title="Home Ownership"> <a href="/index.php/home-ownership/">Home Ownership</a> <ul class="level2"> <li title="Active Developments"> <a href="/index.php/home-ownership/active-developments/">Active Developments</a> <ul class="level3"> <li title="Biggs Estates"> <a href="/index.php/home-ownership/active-developments/biggs-estates/">Biggs Estates</a> </li> <li title="Calle Vista"> <a href="/index.php/home-ownership/active-developments/calle-vista/">Calle Vista</a> </li> <li title="Villa La Michele III"> <a href="/index.php/home-ownership/active-developments/villa-la-michele-iii/">Villa La Michele III</a> </li> <li title="Sierra Vista"> <a href="/index.php/home-ownership/active-developments/sierra-vista/">Sierra Vista</a> </li> <li title="Sierra Vista 2"> <a href="/index.php/home-ownership/active-developments/sierra-vista-2/">Sierra Vista 2</a> </li> <li title="Siskiyou Grove"> <a href="/index.php/home-ownership/active-developments/siskiyou-grove/">Siskiyou Grove</a> </li> </ul> </li> <li title="Past Developments"> <a href="/index.php/home-ownership/past-developments/">Past Developments</a> </li> <li title="How to Bid on CHIP Projects"> <a href="/index.php/home-ownership/how-to-bid-on-chip-projects/">How to Bid on CHIP Projects</a> </li> <li title="Homebuyer Education"> <a href="/index.php/home-ownership/homebuyer-education/">Homebuyer Education</a> </li> </ul> </li> <li title="Jobs"> <a href="/index.php/jobs/">Jobs</a> </li> <li title="About Us"> <a href="/index.php/about-us/">About Us</a> <ul class="level2"> <li title="Leadership"> <a href="/index.php/about-us/leadership/">Leadership</a> </li> </ul> </li> </ul> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
仅在 jQuery Mobile 中抑制某些链接的 AJAX/哈希行为 - Supressing AJAX/hash behavior for certain links only in jQuery Mobile
jQuery切换移动菜单（删除href javascript） - Jquery toggle mobile menu (remove href javascript)
表内的jQuery mobile和href链接不起作用 - jQuery mobile and href links inside a table not working
jQuery Mobile HREF链接不适用于Javascript - JQuery Mobile HREF link not working with Javascript
如果用户已经在 href 链接/链接指向的页面上，有没有办法禁用 href 链接/链接，而不使用 JQuery？ - Is there a way to disable href link / links if the user is already on the page the href link / links leads to, without using JQuery?
切换链接HREF - Toggle link HREF
使用 href hash 路由时，Bootstrap 选项卡窗格不会切换 - Bootstrap tab pane will not toggle when using href hash route
如何更改链接的“href”属性使用jQuery具有特定的“href”？ - How to change “href” attribute of link has specific “href” using jQuery?
带哈希的jQuery href - Jquery href with hash
应用带有jQuery的连字仅链接文本，不链接href - Apply ligature with jquery to link text only, not link href
相关标签