JavaScript Drop Down Menu

Question

I have created a drop down menu that works, but i want it to be used to select filters. So the problem is when you select a filter option the drop down goes away. I only want the menu to display and go away when the word filters is selected. I think i just need so more javascript to do this i just dont know how. Thanks for your help in advance.

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 may want to put the "Filters" text on an element then toggle on it.

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

and your script would then be:

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 well then you need to change it's display to block, #toggle { display:block;} OR you can change it to a <div>. jsfiddle

Answer 2

You want to stop the click event from propagating out of the dropdown 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 the 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 div element with the id, "vv" has a click listener that toggles the content in and out of view. You want to be able to click items inside this div so you need to make sure the click event doesn't bubble up to the vv click listener. To do this just call stopPropagation.

Answer 3

Try this:

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();
    });
});

P.S: You did click event on whole document not sure why...So I did the same. I am guessing it's a part of some other concept. If not, I would suggest not to use it, instead use click event on id=vv div