highchartsdude
highchartsdude

Reputation: 571

Having problems with .click on jQuery

I have the following code:

$("div.button").click(
        function(e){
            e.preventDefault();
            $(this).find("div.th-overlay-dropdown").show();
            var vals = new Object();
            var current = $(this);
            $(this).find("ul").append("<li><a href='#' class='dropdown-filter-link'>All</a></li>");
            $("table tbody td." + $(this).find("ul").attr("class") + ":visible").each(function(i){
                var t = trim($(this).text());
                if(t != 'All' && t != '') {
                    vals[t] = t;
                }
            });
            var sortedVals = new Array();
            for(var item in vals) {
                sortedVals.push(trim(item));
            }
            sortedVals = sortedVals.sort();
            for(var item in sortedVals) {
                var i = sortedVals[item];
                if(typeof(i) == 'string') {
                    $(current).find("ul").append("<li><a href='#' class='dropdown-filter-link'>" + sortedVals[item] + "</a></li>");
                }
            }
        },

        function (e) {
            e.preventDefault();
            $(this).find("div.th-overlay-dropdown").hide();
            $(this).find("ul").empty();
        }
    );

When I click on div.button the element shows the dropdown but when I click div.button a second time I want the dropdown to disappear - what am I doing wrong?

Upvotes: 1

Views: 45

Answers (2)

Joe
Joe

Reputation: 82614

use toggle instead of click

$("div.button").toggle();

Here's a simplified example: http://jsfiddle.net/s3ZQ6/

Upvotes: 1

James Johnson
James Johnson

Reputation: 46047

I would try using the toggle function instead:

$(this).find("div.th-overlay-dropdown").toggle();

Upvotes: 1

Related Questions