i'm trying modify bootstrap dropdown js code add/remove class div earlier in code, oppose parent li, uses target class toggling. js skills admittedly not them be, i'm sure pretty easy 1 little more experience! have setup codepen jsfiddle-- goal toggle class 'open' div #navbar-container on clicking dropdown li item 'products'
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 <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 apache license, version 2.0 (the "license"); * may not use file except in compliance license. * may obtain copy of license @ * * http://www.apache.org/licenses/license-2.0 * * unless required applicable law or agreed in writing, software * distributed under license distributed on "as is" basis, * without warranties or conditions of kind, either express or implied. * see license specific language governing permissions , * limitations under 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 use 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-- // 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 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 } /* apply 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);
give li element id
<li class="dropdown" id="product"> after giving element id, need use click event , toggleclass on .navbar-container.
$('#product').click(function(){ $('.navbar-container').toggleclass('open'); }); check out jsfiddle - i've updated fiddle. in order see effect can inspect code , click on products. you'll see open class toggling.
i hope helps.
Comments
Post a Comment