文章/答案/技术大牛

发布

社区首页 >问答首页 >如果菜单链接有子项，如何防止它在第一次单击时重定向

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

Stack Overflow用户

提问于 2019-03-28 22:01:09

回答 1查看 951关注 0票数 4

我有一个带有多个下拉菜单的菜单，每个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只适用于第一级的dropdowns。

最初，我的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');
            }
        }
    }
});

我怎样才能让下拉列表在不考虑子级别的情况下工作呢？

javascript

jquery

css

回答 1

Stack Overflow用户

发布于 2019-03-28 22:08:27

当它第一次被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");
     } 
});

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55399484

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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