我正在尝试修改引导下拉 JS 代码以在代码的前面向 div 添加/删除一个类，这与它当前用作类切换目标的父 li 相反。诚然，我的 JS 技能不是我想要的，但我敢肯定，对于有更多经验的人来说，这很容易！我已经设置了一个 codepen 以及 JSfiddle——目标是在单击下拉项目“产品”时将“打开”类切换到 div #navbar-container
http://codepen.io/anon/pen/aFtrL
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);