jQuery Selector Question

Answer 1

just do $('.box').hide();

if this doesn't work then have you tried putting in an alert in the code to see if the event is firing?

or try two parents as apple is a child of the ul and then you get to the box.

it also depends at what point your creating the live code. if you create it on document load then it should work. if however you create it when you create ".box" then it won't work as it hasn't executed.

Answer 2

use .closest().

$('.apple').live('click',function(){
   $(this).closest('.box').hide();
});

---

or make it in all li of ul with the class="fruits"

$('.fruits li').live('click',function(){
   $(this).closest('.box').hide();
});

---

updated answer

//pops the menu when productControl is clicked
$('.fruits li').live('click',function(e){ // pass e as parameter...
   e.stopPropagation();
   $(this).closest('.box').hide();
});

use .stopPropagation() to stop it's parent calling it's click handler which is $(".productControl").live('click',function(){...}); making it showing again...

---

another update

$(".productControl").live('click',function(e){
   if ($(e.target).is('li')) return; // <-- add this line...
   //... other codes
});

Answer 3

This is the best way to do it:

$('.apple').live('click', function() { 
    $(this).closest(".box").hide();
});

But using parents should also be working (difference is: it will also hide .boxes further up the DOM tree). If it does not work, we may need to see more of your code.