Reputation: 571
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
Reputation: 82614
use toggle instead of click
$("div.button").toggle();
Here's a simplified example: http://jsfiddle.net/s3ZQ6/
Upvotes: 1
Reputation: 46047
I would try using the toggle
function instead:
$(this).find("div.th-overlay-dropdown").toggle();
Upvotes: 1