只有當鏈接在href中鏈接時纔會在鏈接上切換鏈接 - jquery

試圖使鏈接與子節點之間的導航鏈接在打開到該頁面之前切換爲打開狀態。現在，即使父母有孩子，下面的代碼也只能直接翻頁。思考？只有當鏈接在href中鏈接時纔會在鏈接上切換鏈接 - 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) 
    } 
});

更新的解決方案（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>

來源

2016-09-28 frshjb373

如果你不想失去使用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>

來源

2016-09-28 21:48:58 DaniP

使用你的技術，但不得不查詢僅在移動所以不得不添加切換類靶向視寬。包括我上面的答案。謝謝 – frshjb373

是啊gald幫助U mate @ frshjb373 – DaniP

您需要防止點擊的默認行爲在<a>。像這樣的東西。

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

來源

2016-09-28 21:39:23

您需要隱藏這些li級別。我看到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>

來源

2016-09-28 22:51:27

只有當鏈接在href中鏈接時纔會在鏈接上切換鏈接 - jquery

回答

相關問題