javascript - 如果菜单链接有子项，如何防止菜单链接在第一次单击时重定向

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。

但是，如果我点击第一层，然后在该子元素中我点击了一个也有子元素的链接，在点击最后一层的链接后，页面重定向到错误的 url。

如果我点击关于->州长->董事会。重定向转到州长页面。

这意味着我的 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

第一次点击时，可以存入它的data，第二次重定向:

$('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");
     } 
});