Question

我花了好几个小时试图让这个工作，几个小时阅读这些论坛并尝试不同的代码。我可以用一些帮助。

我试图追加活跃的＆＃39;我的主菜单上的课程。代码确实将活动类添加到li中，但是一旦发生这种情况我就无法单击它。

这是我尝试过的;

$('.nav li').click(function(e) {
    e.preventDefault(); //prevent the link from being followed
    $('.nav li').removeClass('active');
    $(this).addClass('active');
});

如果删除e.preventDefault（）;活跃的课程在不到一秒的时间内仍然可以追加到任何时候。

主菜单

<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
        <div class="container">
            <ul class="nav navbar-nav">
                <!-- Home -->
                <li class="nav active">
                    <a href="index.php" class="dropdown-toggle">
                    <i class="fa fa-home"></i>  Home
                    </a>
                </li>
                <!-- End Home -->

                <!-- Features -->
                <li class="nav">
                    <a href="features.html" class="dropdown-toggle">
                    <i class="fa fa-list"></i>  Features
                    </a>
                </li>                    
                <!-- End How It Works -->

                <!-- Features -->
                <li class="nav">
                    <a href="howitworks.html" class="dropdown-toggle">
                    <i class="fa fa-compass"></i>  How It Works
                    </a>
                </li>                    
                <!-- End How It Works -->

                <!-- Pricing -->
                <li class="nav">
                    <a href="pricing.html" class="dropdown-toggle">
                    <i class="fa fa-credit-card"></i>  Pricing
                    </a>
                </li>
                <!-- End Pricing -->

                <!-- Help Articles -->
                <li class="dropdown">
                    <a href="help_center.html" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-life-ring"></i>  Help
                    </a>
                     <ul class="dropdown-menu">
                        <li>
                            <div class="mega-menu-content disable-icons">
                                <div class="container">
                                    <div class="row equal-height">
                                        <div class="col-md-3 equal-height-in">
                                            <ul class="list-unstyled equal-height-list">
                                                <li><h3> Top 7 Help Articles</h3></li>

                                                <!-- Help Articles -->
                                                <li><a href="Help Article.html"><i class="fa fa-sort-alpha-asc"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-magic"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-ellipsis-h"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-quote-left"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-asterisk"></i> Help Articles</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-comments"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-tasks"></i> Help Article</a></li>
                                                <!-- End Help Articles -->
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ul>
                </li>

                <!-- End Help Articles -->

                <!-- Contact Us -->
                <li class="nav">
                    <a href="contactus.html" class="dropdown-toggle">
                    <i class="fa fa-envelope-o"></i>  Contact Us
                    </a>

                </li>                    
                <!-- Contact Us -->

            </ul>
        </div><!--/end container-->
    </div><!--/navbar-collapse-->
</div>

Answer 1

继承了活跃课程的javascript选项 - codepen

//vanilla js -- toggle active class 
// el = object containing the elements to toggle active class and the parent    element 
var el = {
   one: document.getElementById('one'),
   two: document.getElementById('two'),
   three: document.getElementById('three'),
   hold: document.getElementById('hold')
};
// func = object containing the logic 
   var func = {
      toggleActive: function(ele) {
      ele = event.target;
      var hold = el.hold.children;
      var huh = el.hold.children.length;
      var hasActive = ele.classList.contains('active');
      for (i = 0; i < huh; i++) {
          if (hold[i].classList.contains('active')) {
          hold[i].classList.remove('active');
      }
    }
    if (!hasActive) {
       ele.classList.add('active');
    }
  }
};

  //add listeners when the window loads 
  window.onload = function() {
     var holdLen = el.hold.children.length; //add listener to all elements inside #hold
     for(i=0;i<holdLen;i++){
         el.hold.children[i].addEventListener("click", func.toggleActive);
      }
  }

Answer 2

将处理程序绑定到<a>，而不是<li>。

$(".nav li a").click(function(e) {
    e.preventDefault();
    $(".nav li.active").removeClass("active");
    $(this).closest("li").addClass("active");
});

追加“活跃”＆＃39;上课到李

2 个答案: