JavaScript Dropdown Menu

Question

I created a drop-down menu that works, but I want it to be used to select filters. So the problem is that you select the filter option when the dropdown is reduced. I want the menu to show and go when word filters are selected. I think I just need more javascript to do this, I just don't know how to do this. Thank you for your help.

Here is my html:

<div id="vv" class="fill_box"> Filters <div class="dropdown1"> <div class="padding"> <div class="type"> <div class="typeTitle"> Type: </div> <div class="typeButton"> <div class="typeOne"> All </div> <div class="typeOne"> Local </div> <div class="typeOne"> Chain </div> </div> </div> <div class="type"> <div class="typeTitle"> Price: </div> <div class="typeButton"> <div class="priceOne"> $ </div> <div class="priceOne"> $$ </div> <div class="priceOne"> $$$ </div> <div class="priceOne"> $$$$ </div> </div> </div> <div class="type"> <div class="nowButton"> Open Now </div> </div> <div class="type"> <div class="typeTitle"> Category 1: </div> <div class="categoryButton"> <input type="text"> </div> </div> </div> </div> </div> 

CSS:

 .fill_box { position: relative; margin: 0 auto; background: #fff;s border-radius: 5px; box-shadow: 0 1px 0 rgba(0,0,0,0.2); cursor: pointer; outline: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-align: center; background: #CC0000; border: 2px solid white; border-radius: 4px; padding: 5px 0; margin-top: 10px; font-size: 14px; width: 100px; color: white; } .fill_box .dropdown1 { overflow: hidden; margin: 0 auto; padding: 0px; background: white; border-radius: 0 0 0px 0px; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-align: left; max-height: 0; background: #3d3d3d; width: 300px; color: white; } 

JavaScript:

 function DropDown1(me) { this.dd = me; this.initEvents(); } DropDown1.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); }); } } $(function() { var dd = new DropDown1( $('#vv') ); $(document).click(function() { // all DropDown1s $('.fill_box').show('active'); }); }); 

Answer 1

You can put the text "Filters" on an element, and then switch it.

 <a id="toggle">Filters</a> 

and your script will be as follows:

 function DropDown1(me) { this.dd = me; this.initEvents(); } DropDown1.prototype = { initEvents : function() { var obj = this; obj.dd.on('click','#toggle', function(event){ $(this).parent().toggleClass('active'); }); } } $(function() { var dd = new DropDown1( $('#vv') ); $(document).click(function() { // all DropDown1s $('.fill_box').show('active'); }); }); 

Here is the fiddle

---

With the <a> tag, you need to click on the exact text to fire the event. If this does not work, you need to change its display to lock, #toggle { display:block;} OR you can change it to <div> . jsfiddle

Answer 2

You want to stop distributing the click event from the drop-down menu.

I updated your fiddle. http://jsfiddle.net/k73s8/6/

 $(".dropdown1").click(function(e) { e.stopPropagation(); }); 

http://api.jquery.com/event.stopPropagation/

This is what HTML looks like.

 <div id="vv" class="fill_box active"> Filters <div class="dropdown1"> <div class="padding"> <div class="type"> <div class="typeTitle"> Type: </div> <div class="typeButton"> <div class="typeOne"> All </div> <div class="typeOne"> Local </div> <div class="typeOne"> Chain </div> </div> </div> <div class="type"> <div class="typeTitle"> Price: </div> <div class="typeButton"> <div class="priceOne"> $ </div> <div class="priceOne"> $$ </div> <div class="priceOne"> $$$ </div> <div class="priceOne"> $$$$ </div> </div> </div> <div class="type"> <div class="nowButton"> Open Now </div> </div> <div class="type"> <div class="typeTitle"> Category 1: </div> <div class="categoryButton"> <input type="text"> </div> </div> </div> </div> </div> 

The root element of the div with id, "vv", has a click listener that switches content to or from a view. You want to be able to click elements inside this div so that you need to make sure that the click event does not bubble up to the vv click listener. To do this, just call stopPropagation.

Answer 3

Try the following:

http://jsfiddle.net/k73s8/1/

 <div id="vv" class="fill_box"> Filters </div> $(function() { var dd = new DropDown1( $('#vv') ); $(document).click(function() { // all DropDown1s $('.fill_box').show('active'); $('.dropdown1').toggle(); }); }); 

PS: You clicked on the entire document, you don’t know why ... So, I did the same. I guess this is part of some other concept. If not, I would suggest not using it, use the click event on id=vv div instead

Answer 4

Well, there are a few things you could do, but I suggest you not rely on Javascript because some people turn it off or have turned it off by default, so I suggest you lean over the CSS part. yet?