How to keep an elemet’s event to itself

[wbffox]

Hello World! Long time lurker, first time poster. Before the question, just wanted to say thanks for this website and the snippets; have been a huge help. Do miss the frog though post redo (think it was a frog?).

Just as a disclaimer, I am not a real web designed by any means, so don’t assume that I have done the equivalent of turning on the power button.

I am trying to implement the [Styled Popup Menu](https://css-tricks.com/snippets/jquery/styled-popup-menu/ “Styled Popup Menu”) on a wordpress site. The function has it’s own .js file that I call through wp_enqueue in my functions.php file.

When I just have one of these on a page, it works like a charm (using to display links to all post categories). When I add a second implementation on the same page (to show all tags), both implementations display the list of tag links.

Is there a way to implement this function on multiple elements on the same page with the same class names so that each implementation will show their own specific lists, or will I need to have a separate function written/wp_enqueue’d/etc… for unique class names for all elements?

Unfortunately I am designing the site on local host so I cannot link to show it, but my code of the functions and html are below. Any advice would be greatly appreciated.

styleddropdown.js ($ replaced by jQuery)

(function(jQuery){
jQuery.fn.styleddropdown = function(){
return this.each(function(){
obj = jQuery(this)
obj.find(‘.field’).click(function() { //onclick event, ‘list’ fadein
obj.find(‘.list’).fadeIn(400);

jQuery(document).keyup(function(event) { //keypress event, fadeout on ‘escape’
if(event.keyCode == 27) {
obj.find(‘.list’).fadeOut(400);
}
});

obj.find(‘.list’).hover(function(){ },
function(){
jQuery(this).fadeOut(400);
});
});

obj.find(‘.list li’).click(function() { //onclick event, change field value with selected ‘list’ item and fadeout ‘list’
obj.find(‘.field’)
.val(jQuery(this).html())
.css({
‘background’:’#fff’,
‘color’:’#333′
});
obj.find(‘.list’).fadeOut(400);
});
});
};
})(jQuery);

jQuery(function(){
jQuery(‘.size’).styleddropdown();
});

HTML/php in my page.php file

$args = array(
‘orderby’ => ‘name’,
‘order’ => ‘ASC’
);
$categories=get_categories($args);
foreach ($categories as $category) {
echo ‘
• Category:term_id ).'” title=”‘ . sprintf( __(
  “View all posts in %s” ), $category->name ) . ‘” >’ . $category->name.’

‘;
}
?>

$tags=get_tags(“hide_empty=false&get=all”);
$html = ‘
• ‘;
  foreach ($tags as $tag) {
  $tag_link = get_tag_link($tag->term_id);
  }
  $html .= “Tag: slug}’>”;
  $html .= “{$tag->name}

“;
echo $html
?>

[Author]

Posts