下拉菜单中的链接不起作用

Question

Having an issue getting any kind of interaction from these links in the dropdown. 从下拉列表中的这些链接获取任何形式的交互时遇到问题。 I tried various link types and none are responding to clicks. 我尝试了各种链接类型，但都没有响应点击。

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

The test page is at bruxzir.jgallardo.me/header.aspx . 测试页面位于bruxzir.jgallardo.me/header.aspx中。

This is the full code for that page that I am using during development. 这是我在开发过程中使用的该页面的完整代码。 (I am not doing this in production) （我不是在生产中这样做）

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

You're returning false and stopping event bubbling for all clicks withing the $('#dd') element right now. 您现在使用$('#dd')元素返回false并停止所有点击的事件冒泡。 I think you only want to do that for your initial menu toggling click on the $('.dd') element. 我认为您只希望在切换初始菜单时单击$('.dd')元素。

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

Answer 2

Look at the jsFiddle . 看一下jsFiddle 。 I removed a lot of javascript and used one jQuery. 我删除了很多JavaScript，并使用了一个jQuery。 I am not sure what you need, let me know if there something I missed. 我不确定您需要什么，如果我错过了什么，请告诉我。

  $(function () {

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


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

  });

下拉菜单中的链接不起作用

问题描述

2 个解决方案

解决方案1
2 2014-01-29 03:40:17

解决方案2
1 已采纳 2014-01-29 03:24:10

下拉菜单中的链接不起作用

问题描述

2 个解决方案

解决方案1 2 2014-01-29 03:40:17

解决方案2 1 已采纳 2014-01-29 03:24:10

解决方案1
2 2014-01-29 03:40:17

解决方案2
1 已采纳 2014-01-29 03:24:10