Jquery 自定义导航菜单的引导下拉代码

我试图修改引导下拉JS代码，以便在代码的前面向div添加/删除一个类，这与父li相反，父li当前用作类切换的目标。诚然，我的JS技能并不是我想要的，但我相信这对于一个经验稍多一点的人来说是相当容易的！我已经设置了一个codepen和JSfiddle——目标是在单击下拉项“products”时将类“open”切换到div#navbar容器

HTML：
关于联通营养公司。














女式




男式








JS:
/* ============================================================
*bootstrap-dropdown.js v2.3.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
*版权所有2012推特公司。
*
*根据Apache许可证2.0版（以下简称“许可证”）获得许可；
*除非遵守许可证，否则不得使用此文件。
*您可以通过以下方式获得许可证副本：
*
* http://www.apache.org/licenses/LICENSE-2.0
*
*除非适用法律要求或书面同意，软件
*根据许可证进行的分发是按“原样”进行分发的，
*无任何明示或暗示的保证或条件。
*请参阅许可证以了解管理权限和权限的特定语言
*许可证下的限制。
* ============================================================ */
!函数（$）{
“使用严格”；/jshint；\ux；
/*下拉类定义
* ========================= */
变量切换=“[数据切换=下拉]”
，下拉菜单=函数（元素）{
var$this=$（this）.on（'click.dropdown.dataapi'，this.toggle）
$（'html'）。on（'click.dropdown.dataapi'，函数（）{
$this.parent（）.removeClass（'open'）
})
}
Dropdown.prototype={
构造函数：下拉列表
，切换：功能（e）{
变量$this=$（this）
，$parent
，我很活跃
if（$this.is（'.disabled，：disabled'））返回
$parent=$this.parent（）
isActive=$parent.hasClass（'open'））
clearMenus（）
如果（！isActive）{
if（'document.documentElement中的“ontouchstart”）{
//如果我们使用手机，我们会使用背景，因为点击事件不会委派
$（''）.insertBefore（$（this））.on（'单击'，清除菜单）
}
$parent.toggleClass（'open'）
}
$this.focus（）
返回错误
}
，向下键：功能（e）{
var$这个
，$items
，$active
，$parent
，我很活跃
指数
如果（！/（38 | 40 | 27）/.test（e.keyCode））返回
$this=$（this）
e、 预防默认值（）
e、 停止传播（）
if（$this.is（'.disabled，：disabled'））返回
$parent=$this.closest（'div'））
isActive=$parent.hasClass（'open'））
如果（！isActive | |（isActive&&e.keyCode==27））{
如果（e.which==27）$parent.find（toggle.focus）（）
返回$this。单击（）
}
$items=$（'[role=menu]li:not（.divider）：可见a'，$parent）
如果（！$items.length）返回
index=$items.index（$items.filter（':focus'））
如果（e.keyCode==38&&index>0）索引--//向上
如果（e.keyCode==40&&index<$items.length-1）index++//down
如果（！~index）index=0
$items
.eq（指数）
.focus（）
}
}
函数clearMenus（）{
$（'.dropdown background'）.remove（）
$（切换）。每个（函数（）{
getParent（$（this））.removeClass（'open'））
})
}
函数getParent（$this）{
变量选择器=$this.attr（'data-target'））
，$parent
如果（！选择器）{
选择器=$this.attr（'href'）
选择器=选择器&&/#/.test（选择器）&&selector.replace（/.*（=#[^\s]*$）/，“”）//ie7的条带
}
$parent=选择器&&$（选择器）
if（！$parent | |！$parent.length）$parent=$this.parent（）
返回$parent
}
/*下拉插件定义
* ========================== */
var old=$.fn.dropdown
$.fn.dropdown=函数（选项）{
返回此。每个（函数（）{
变量$this=$（this）
，data=$this.data（'dropdown'））
如果（！data）$this.data（'dropdown'，（data=newdropdown（this）））
if（typeof option=='string'）数据[option]。调用（$this）
})
}
$.fn.dropdown.Constructor=下拉列表
/*下拉列表没有冲突
* ==================== */
$.fn.dropdown.noConflict=函数（）{
$.fn.dropdown=旧
还这个
}
/*应用程序
HTML:

<header id="top" role="banner">
    <div class="block">
                <h1 class="centrifigue">About Unico Nutrition Inc.</h1>
                <a class="nav-btn" id="nav-open-btn" href="#nav"><i class="icon-align-justify icon-large"></i></a>
            </div>
    </header>

            <nav id="nav" role="navigation">
            <div class="block">
          <div class="navbar-container">
                      <ul class="nav pull-left">
                      <li>
                        <a class="brand" href="index.php"><div class="brandy"><img src="http://www.uniconutrition.com/images/logos/images/unico_logo_white_03.png" alt="unico nutrition logo"/></div></a> 
                                        </li>
                        <li><a href="http://www.twitter.com/uniconutrition"><i class="social icon-twitter"></i></a></li>
                        <li><a href="http://www.facebook.com/uniconutrition"><i class="social icon-facebook"></i></a></li>
                     <li><a href="http://www.pinterest.com/uniconutrition"><i class="social icon-pinterest"></i></a></li>
                          <li><a href="https://plus.google.com/112853492391070366802/posts"><i class="social icon-google-plus"></i></a></li>
                         </ul>
                        <ul class="nav pull-right">

                          <li><a href="fitness_blog/">Fit-Blog <i class="icon-chevron-right "></i></a></li>
                          <li class="active"><a href="aboutus.html">About Us <i class="icon-chevron-right "></i></a></li>
                          <li><a href="contact.html">Contact <i class="icon-chevron-right "></i></a></li>
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                              <li class="nav-header">Women's</li>
                              <li><a href="http://www.preworkoutforwomen.com"
       onclick="_gaq.push(['_link', 'http://www.preworkoutforwomen.com']); return false;">TONED Pre-Workout <i class="icon-chevron-right "></i></a></li>
                              <li><a href="#"></a></li>
                              <li><a href="#"></a></li>
                              <li class="divider"></li>
                              <li class="nav-header">Men's</li>
                              <li><a href="#">Coming Summer 2013 <i class="icon-chevron-right "></i></a></li>
                              <li><a href="#"></a></li>
                                <li class="divider"></li>
                                 <li><a href="products.html">Products Home <i class="icon-chevron-right "></i></a></li>
                            </ul>
                          </li>

                                <form class="navbar-search pull-left" action="http://store.uniconutrition.com/SearchResults.asp" method="get" name="SearchBoxForm">
                <input type="text" name="Search" class="search-query span2" placeholder="Search" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}"/>
                <!--<input type="submit" name="Submit" id="search_submit" value=""/> -->
            </form>


                          <li><a href="http://store.uniconutrition.com/">Shop <i class="icon-chevron-right "></i></a></li>


                        </ul>


                <a class="close-btn" id="nav-close-btn" href="#top"><i class="icon-remove icon-large"></i></a>
            </div>
            </div>
        </nav>


JS:
/* ============================================================
 * bootstrap-dropdown.js v2.3.2
 * http://twitter.github.com/bootstrap/javascript.html#dropdowns
 * ============================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============================================================ */


!function ($) {

  "use strict"; // jshint ;_;


 /* DROPDOWN CLASS DEFINITION
  * ========================= */

  var toggle = '[data-toggle=dropdown]'
    , Dropdown = function (element) {
          var $this = $(this).on('click.dropdown.data-api', this.toggle)
        $('html').on('click.dropdown.data-api', function () {
           $this.parent().removeClass('open')
        })
      }

  Dropdown.prototype = {

    constructor: Dropdown

  , toggle: function (e) {
      var $this = $(this)
        , $parent
        , isActive

      if ($this.is('.disabled, :disabled')) return

      $parent =   $this.parent()

      isActive = $parent.hasClass('open')

      clearMenus()

      if (!isActive) {
        if ('ontouchstart' in document.documentElement) {
          // if mobile we we use a backdrop because click events don't delegate
          $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
        }
        $parent.toggleClass('open')
      }

      $this.focus()

      return false
    }

  , keydown: function (e) {
      var $this
        , $items
        , $active
        , $parent
        , isActive
        , index

      if (!/(38|40|27)/.test(e.keyCode)) return

      $this = $(this)

      e.preventDefault()
      e.stopPropagation()

      if ($this.is('.disabled, :disabled')) return

      $parent = $this.closest('div')

      isActive = $parent.hasClass('open')

      if (!isActive || (isActive && e.keyCode == 27)) {
        if (e.which == 27) $parent.find(toggle).focus()
        return $this.click()
      }

      $items = $('[role=menu] li:not(.divider):visible a', $parent)

      if (!$items.length) return

      index = $items.index($items.filter(':focus'))

      if (e.keyCode == 38 && index > 0) index--                                        // up
      if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
      if (!~index) index = 0

      $items
        .eq(index)
        .focus()
    }

  }

  function clearMenus() {
    $('.dropdown-backdrop').remove()
    $(toggle).each(function () {
      getParent($(this)).removeClass('open')
    })
  }

  function getParent($this) {
    var selector = $this.attr('data-target')
      , $parent

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    $parent = selector && $(selector)

    if (!$parent || !$parent.length) $parent = $this.parent()

    return $parent
  }


  /* DROPDOWN PLUGIN DEFINITION
   * ========================== */

  var old = $.fn.dropdown

  $.fn.dropdown = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('dropdown')
      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  $.fn.dropdown.Constructor = Dropdown


 /* DROPDOWN NO CONFLICT
  * ==================== */

  $.fn.dropdown.noConflict = function () {
    $.fn.dropdown = old
    return this
  }


  /* APPLY TO STANDARD DROPDOWN ELEMENTS
   * =================================== */

  $(document)
    .on('click.dropdown.data-api', clearMenus)
    .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

}(window.jQuery);

<li class="dropdown" id="product">

 $('#product').click(function(){

      $('.navbar-container').toggleClass('open');

  });