鏈接在下拉菜單中沒有工作

有得到任何類型的相互作用，從下拉這些鏈接的問題。我嘗試了各種鏈接類型，沒有人迴應點擊。鏈接在下拉菜單中沒有工作

<li class="headerContact"> 
    <a href="/contact.aspx">Contact Us<i class="fa fa-envelope"></i></a> 
</li> 
<li class="menuLink"> 
    <a href="/">Features<i class="fa fa-caret-right right"></i></a> 
</li> 
<li class="menuLink"> 
    <a href="#">Science<i class="fa fa-caret-right right"></i></a> 
</li> 
<li class="menuLink"> 
    <a href="test.aspx">Videos<i class="fa fa-caret-right right"></i></a> 
</li>

測試頁面爲bruxzir.jgallardo.me/header.aspx。

這是發展過程中，我使用的是網頁的完整代碼。（我不是在生產中這樣做）

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <!--#include file="/pages/_includes/head-default.html" --> 
    <style> 
     .active .dropdown { display:block; } 
     .dropdown { display:none; } 

     .header { 
     background-color: #333; 
     color: #fff; 
     height: 36px; 
     width: 100%; 
     line-height: 36px; 
     } 

     /* should be replaced with image */ 
     .headerLogo { 
     display:inline; 
     font-size: 24px; 
     line-height: 36px; 
     padding-left: 6px; 
     } 
     .headerMenu{ 
     float:right; 
     font-size: 36px; 
     margin-right: 6px; 
     } 
     .headerLogo a, .headerMenu a { color:#fff; text-decoration:none; } 


     .headerNav { 
     background-color: #292c2d; 
     overflow:hidden; 
     width:100%; 
     } 
     .headerNav a { color: #f3f3f3; text-decoration: none; } 

     .headerNav ul { 
     list-style-type: none; 
     margin:0; 
     padding-left: 0; 
     text-align:left; 
     } 
     .headerNav ul li { 
     border-bottom: 1px dotted #34393b; 
     display:inline-block; 
     width: 100%; 

     } 
     .menuLink a { 
     display:block; 
     line-height: 48px; 
     padding: 0 12px; 
     } 
     .headerNav ul li a i { 

     line-height: 48px; 

     } 
     .right { float:right; } 

     .findLabLink { 
     background-color: #48e0a4; 
     margin: 0 auto; 
     text-align: center; 
     width: 84%; 
     } 
     .findLabLink a { 
     color: rgb(40,43,45); 
     display:block; 
     line-height: 48px; 
     } 

     .headerContact { 
     line-height: 60px; 
     text-align: center; 
     } 

     .headerContact a { 
     background-color: #464241; 
     border-radius: 2px; 
     letter-spacing: 3px; 
     padding: 8px 18px; 
     } 
     .headerContact i { 
     margin-left: 30px; 
     } 
    </style> 
    </head> 
    <body> 
     <div class="container"> 
     <div id="mainContent" class="block push"> 
     <div class="row"> 
      <div class="large-12 columns"> 
      <h1>BruxZir Home Page</h1> 

      <div id="dd" class="wrapper-dropdown-3 dd" tabindex="1"> 

       <div class="header"> 
       <div class="headerLogo"> 
        <!-- change # to/--> 
        <a href="#">BruxZir</a> 
       </div> 
       <div class="headerMenu"> 
        <a href="#" class="dd">&equiv;</a> 
       </div> 
       </div> <!--/ end of .header --> 


       <div class="headerNav"> 
       <ul class="dropdown"> 
        <li class="findLabLink"> 
        <a href="#">Find An Authorized Lab</a> 
        </li> 
        <li class="headerContact"> 
        <a href="/contact.aspx">Contact Us<i class="fa fa-envelope"></i></a> 
        </li> 
        <li class="menuLink"> 
        <a href="/">Features<i class="fa fa-caret-right right"></i></a> 
        </li> 
        <li class="menuLink"> 
        <a href="#">Science<i class="fa fa-caret-right right"></i></a> 
        </li> 
        <li class="menuLink"> 
        <a href="test.aspx">Videos<i class="fa fa-caret-right right"></i></a> 
        </li> 
        <li class="menuLink"> 
        <a href="#">Cases<i class="fa fa-caret-right right"></i></a> 
        </li> 

        <li class="menuLink"> 
        <a href="#">Testimonials<i class="fa fa-caret-right right"></i></a> 
        </li> 
       </ul>   
       </div> <!-- headerNav --> 

      </div> 




      </div> 
     </div> 
     </div> <!-- end of #mainContent --> 
    </div> 
<!-- JavaScript Declarations 
======================== --> 
    <!--#include file="/pages/_includes/js-default.html" --> 
    <script> 
    // all of this is for the menu 
    function WTF() { 
    window.location.href = ""; 
    } 

    function DropDown(el) { 
    this.dd = el; 
    this.placeholder = this.dd.children('span'); 
    this.opts = this.dd.find('ul.dropdown > li'); 
    this.val = ''; 
    this.index = -1; 
    this.initEvents(); 
    } 
    DropDown.prototype = { 
    initEvents: function() { 
     var obj = this; 
     obj.dd.on('click', function (event) { 
     event.stopPropagation(); 
     if (event.target.className === 'dd') { 
      $(this).toggleClass('active'); 
     } 
     return false; 
     }); 
    } 
    } 

    $(function() { 
    var dd = new DropDown($('#dd')); 

    $(document).click(function() { 
     // all dropdowns 
     $('.wrapper-dropdown-3').removeClass('active'); 
    }); 
    }); 
    </script> 
    </body> 
</html>

來源

2014-01-29 JGallardo

看那jsFiddle。我刪除了很多JavaScript，並使用了一個jQuery。我不確定你需要什麼，如果有我錯過的東西，請告訴我。

$(function() { 

     $('.dd').on('click', function(event){ 
      event.stopPropagation(); 
      $('.wrapper-dropdown-3').toggleClass('active'); 
     }); 


     $(document).click(function() { 
     // all dropdowns 
     $('.wrapper-dropdown-3').removeClass('active'); 
    }); 

    });

來源

2014-01-29 03:24:10 Siva

沒錯，就是完美。你能告訴我我在那裏做錯了什麼嗎？只是好奇，謝謝。 – JGallardo

我不知道，但我想如果（event.target.className === 'DD'）{$（本）.toggleClass（ '主動'）; }可能導致了這個問題。另外，event.stopPropagation（）;阻止點擊事件。 – Siva

你返回false和停止事件冒泡的所有點擊現在withing的$('#dd')元素。我想你只想做了$('.dd')元素的初始菜單反覆點擊。

if (event.target.className === 'dd') { 
    $(this).toggleClass('active'); 
    event.stopPropagation(); // not sure why you need this 
    return false; 
}

來源

2014-01-29 03:40:17 Will

我已經從另一個項目中複製了該代碼。 'event.stopPropagation（）;'通常會做什麼，這可能不會在這裏保證？ – JGallardo

它防止了click事件冒泡到DOM中的父元素。在這種情況下，我認爲這不是必需的。 – Will

鏈接在下拉菜單中沒有工作

回答

相關問題