リンクがhref - jqueryにハッシュを持っているときにのみモバイルでトグルします

Question

あなたがそのページに移動する前に子供とのナビゲーションリンクを開くようにしています。今のところ、親が子を持っていても、下のコードはページにまっすぐに進みます。思考？

UPDATED SOLUTION（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）：あなたは、クリックのデフォルトの動作を阻止する必要が

<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

：ここ

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

はHTMLです<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 level1、level2を見るので、まずそれらを隠す必要があります。 jQueryを使用すると、e.preventDefault（）関数を追加することを忘れてしまい、要素のデフォルトアクションを停止してしまうことがあります。今すぐあなたのコードを使用することができます。 jQueryLiveFiddleでここではトグルだけを使用します。

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