CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2985495
user2985495

Reputation: 89

JavaScript Drop Down Menu

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

Upvotes: 6

Views: 682

Answers (4)

user2805476
user2805476

Reputation: 46

Well there are multiple things you could do but I suggest you don't rely on Javascript because some people turn it off or already by default have it turned off so i suggest you lean towards the css part of things... Anything else?

Upvotes: 1

Mark S
Mark S

Reputation: 3799

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

Upvotes: 2

Ani
Ani

Reputation: 4523

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

Upvotes: 1

sissonb
sissonb

Reputation: 3780

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.

Upvotes: 2

Related Questions