如果菜單鏈接有子項，如何防止菜單鏈接在第一次單擊時重定向

Question

我有一個包含多個下拉菜單的菜單，每個li標簽都有一個鏈接。

HTML看起來像這樣：

<ul class="menu nav navbar-nav">
   <li class="first leaf active active"><a href="/sites/drupal-staging/02/" class="active">Home</a></li>
   <li class="expanded dropdown has-children">
      <a href="https://docs.google.com/spreadsheets/d/1m40UQ81Fayf5tGroe7bW8rj3CreZ3Di_oT-aQkm8_28/edit#gid=0" title="" data-target="#" class="dropdown-toggle">About <span class="caret"></span></a>
      <ul class="dropdown-menu depth-1">
         <li class="first leaf has-sub-children"><a href="/sites/drupal-staging/02/why-somerset-college">Why Somerset College?</a></li>
         <li class="leaf has-sub-children"><a href="/sites/drupal-staging/02/history-school" title="">History</a></li>
         <li class="last expanded dropdown has-sub-children">
            <a href="https://docs.google.com/spreadsheets/d/1m40UQ81Fayf5tGroe7bW8rj3CreZ3Di_oT-aQkm8_28/edit#gid=0" title="" data-target="#" class="dropdown-toggle">Governors <span class="caret"></span></a>
            <ul class="dropdown-menu depth-2">
               <li class="first leaf"><a href="/sites/drupal-staging/02/board-govenors">Board of Governors</a></li>
               <li class="last leaf"><a href="https://docs.google.com/spreadsheets/d/1m40UQ81Fayf5tGroe7bW8rj3CreZ3Di_oT-aQkm8_28/edit#gid=0" title="">PA Commitee</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class="expanded dropdown has-children">
      <a href="/sites/drupal-staging/02/admissions-0" title="" data-target="#" class="dropdown-toggle">Admissions <span class="caret"></span></a>
      <ul class="dropdown-menu depth-1">
         <li class="first last leaf has-sub-children"><a href="/sites/drupal-staging/02/scholarships-bursaries">Scholarships &amp; Bursaries</a></li>
      </ul>
   </li>
   <li class="expanded dropdown has-children">
      <a href="/sites/drupal-staging/02/pre-preparatory-school" title="" data-target="#" class="dropdown-toggle">Pre Preparatory <span class="caret"></span></a>
      <ul class="dropdown-menu depth-1">
         <li class="first leaf has-sub-children"><a href="/sites/drupal-staging/02/aftercare">Aftercare</a></li>
         <li class="last leaf has-sub-children"><a href="/sites/drupal-staging/02/message-head">Letter From the Head</a></li>
      </ul>
   </li>
   <li class="collapsed"><a href="/sites/drupal-staging/02/preparatory">Preparatory</a></li>
   <li class="expanded dropdown has-children">
      <a href="/sites/drupal-staging/02/high-school" data-target="#" class="dropdown-toggle">High School <span class="caret"></span></a>
      <ul class="dropdown-menu depth-1">
         <li class="first expanded dropdown has-sub-children">
            <a href="/sites/drupal-staging/02/high-school-senior-acedemics" title="" data-target="#" class="dropdown-toggle">Senior Academics <span class="caret"></span></a>
            <ul class="dropdown-menu depth-2">
               <li class="first leaf"><a href="/sites/drupal-staging/02/high-school-subject-choices">High School - Subject Choices</a></li>
               <li class="leaf"><a href="/sites/drupal-staging/02/matric-results">Matric Results</a></li>
               <li class="leaf"><a href="/sites/drupal-staging/02/student-development-unit">Student Development Unit</a></li>
               <li class="last leaf"><a href="/sites/drupal-staging/02/high-school-house-grade-and-tutor-system">High School - House, Grade and Tutor System</a></li>
            </ul>
         </li>
         <li class="expanded dropdown has-sub-children">
            <a href="/sites/drupal-staging/02/student-leadership" data-target="#" class="dropdown-toggle">Student Leadership <span class="caret"></span></a>
            <ul class="dropdown-menu depth-2">
               <li class="first leaf"><a href="/sites/drupal-staging/02/social-responsibility">Social Responsibility</a></li>
               <li class="leaf"><a href="/sites/drupal-staging/02/presidents-award">The President's Award</a></li>
               <li class="last leaf"><a href="/sites/drupal-staging/02/exchange-programme">Exchange Programme</a></li>
            </ul>
         </li>
         <li class="leaf has-sub-children"><a href="/sites/drupal-staging/02/senior-school-outdoor-education">Outdoor Education</a></li>
         <li class="leaf has-sub-children"><a href="/sites/drupal-staging/02/sport">Sports</a></li>
         <li class="last expanded dropdown has-sub-children">
            <a href="/sites/drupal-staging/02/high-school-cuture" data-target="#" class="dropdown-toggle">Culture <span class="caret"></span></a>
            <ul class="dropdown-menu depth-2">
               <li class="first leaf"><a href="/sites/drupal-staging/02/music-high-school">Music</a></li>
               <li class="last leaf"><a href="/sites/drupal-staging/02/visual-art-and-design" title="">Art</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class="collapsed"><a href="/sites/drupal-staging/02/cambridge">Cambridge</a></li>
   <li class="leaf"><a href="/sites/drupal-staging/02/old-oaks-0">Old Oaks</a></li>
   <li class="last leaf"><a href="/sites/drupal-staging/02/contact-us-0">Contact Us</a></li>
</ul>

使用jQuery我設法執行以下操作：當我單擊第一級菜單項時，它會阻止重定向並且子項丟失。 然后，如果我再次單擊它或在其子項中，頁面將重定向到其各自的URL。

但是，如果我點擊第一級，那么在該子項內，我點擊一個也有子項的鏈接，點擊最后一級的鏈接后，頁面會重定向到錯誤的網址。

如果我點擊about-> governors->董事會。 重定向轉到州長頁面。

這意味着我的js只適用於第一級下拉菜單。

最初，我的js看起來像這樣：

$('li.dropdown').click(function(e) {
    if ($(window).width() < 1800) {

        if (!$(e.target).closest('ul').is('.dropdown-menu.depth-1')) {
            e.preventDefault();
            if (!$(this).hasClass('open')) {
              $(this).addClass('open');
                //toggle the menu 
            } else {
              //redirect if second click 
              window.location = $(this).find('a').attr('href');
            }
        }
    }
});

然后我編輯到上面為了第二級工作：

$('ul.menu > li.dropdown').addClass("has-children");
$('ul.menu > li.dropdown > ul > li').addClass("has-sub-children");

$('li.dropdown.has-children').click(function(e) {
    if ($(window).width() < 1800) {

        if (!$(e.target).closest('ul').is('.dropdown-menu.depth-1')) {
            e.preventDefault();
            if (!$(this).hasClass('open')) {
              $(this).addClass('open');
                //toggle the menu 
            } else {
              //redirect if second click 
              window.location = $(this).find('a').attr('href');
            }
        }
    }
});

$('li.expanded.dropdown.has-sub-children').click(function(e) {
    if ($(window).width() < 1800) {

        if (!$(e.target).closest('ul').is('.dropdown-menu.depth-2')) {
            e.preventDefault();
            if (!$(this).hasClass('open')) {
              $(this).addClass('open');
                //toggle the menu 
            } else {
              //redirect if second click 
              window.location = $(this).find('a').attr('href');
            }
        }
    }
});

如何在不考慮子級別的情況下使下拉列表工作？

Answer 1

當它第一次被cliecked時，你可以將它存儲在它的數據中，第二次重定向：

$('li.dropdown.has-children').click(function(){
     if($(this).data("clicked")=='1')
     {
         //it's been clicked before and redirect
     }
     else
     {
         //this is the first time it is clicked
         $('li.dropdown.has-children').data("clicked", "0"); // this one is clicked so 
                                                           //reset previously clicked ones.
         $(this).data("clicked", "1");
     } 
});