当链接在href中具有哈希值时，链接仅在移动设备上切换 - jquery

Question

试图使带有孩子的导航链接在您进入该页面之前切换打开。 现在，即使父母有孩子，下面的代码也只会直接进入页面。 想法？

更新的解决方案（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)
   } 
});

更新的解决方案（CSS）：

.main-navigation li ul {
  display:none;
}

这是 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>

Answer 1

如果您不想使用preventDefault丢失 gotolink 行为，一种方法是控制按钮，如：

• 第一次点击切换子菜单
• 第二次点击转到链接

 $('.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>

Answer 2

您需要防止点击<a>默认行为。 像这样的东西。

$('.main-navigation li a').click(function(e){
    e.preventDefault(); //e is click event
    $(this).next('ul').slideToggle();
    return false; //just in case
});

Answer 3

你需要隐藏那些 li 级别。 我看到 li level1,level2 所以我们需要先隐藏它们。 和 jQuery 你只是忘记添加 e.preventDefault() 函数来阻止元素的默认操作发生。所以 2 没有别的错误。 现在您可以使用您的代码。 使用您的jQueryLiveFiddle 。 在这里，我只使用 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>