Question

在下拉菜单中从这些链接获得任何类型的互动时遇到问题。我尝试了各种链接类型，没有一个响应点击。

<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>

Answer 1

您现在正在使用$('#dd')元素返回false并停止事件冒泡所有点击。我想您只想在初始菜单切换点击$('.dd')元素时执行此操作。

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

Answer 2

查看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');
    });

  });

下拉菜单中的链接无效

2 个答案: