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

Question

尝试使带有子项的导航链接在您被带到该页面之前切换打开。现在，即使 parent 有 child ，下面的代码也只能直接进入页面。想法？

更新的解决方案(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>