1

Possible Duplicate:
How to detect a click outside an element?

I have an unordered list that when the user clicks one of the list items, the list item gets a class of "active". Is it possible to write a statement along the lines of. If the user clicks away from $(this) onto another list item, addClass("active2"). If you dont understand let me know. Thank you!

Community
  • 1
  • 1
Eric
  • 31
  • 5
  • On a second thought, I think your problem is a bit different. What should happen when you click on a third item? And what exactly are you trying to accomplish with that? The more information you provide, the better we can help you. – Felix Kling Jul 31 '12 at 16:39
  • for example; li1 is active. if you click li2, li2 has class of active and li1 no longer active but has another class of active2. if you click li3, li2 is no longer active, and li3 has class of active while li1 still holds class of active2 – Eric Jul 31 '12 at 16:42
  • if none of that makes sense ill write a quick jsfiddle – Eric Jul 31 '12 at 16:42
  • So the first clicked element always gets `active2` and any other clicked element gets `active` (removing `active` from the previously clicked one)? – Felix Kling Jul 31 '12 at 16:44
  • So the second element clicked *always* has `active2` from then on? That's... very odd behavior. My answer below does not have that behavior; `active2` is always applied to the second-to-last `li` to be clicked on. Please clarify before I revise again? – KRyan Jul 31 '12 at 16:47
  • @DragoonWraith [JSFIDDLE](http://jsfiddle.net/Q6a7c/8/) imagine that the first link has content to the right, and all other links depending on the link have different content when clicked. the first link is active, but if the user wants to go through the other links i essentially want a backtrack that shows that the user is actaully at link1 while browsing the other links – Eric Jul 31 '12 at 17:00

2 Answers2

1

I understood your question as such:

The first clicked item always keeps the class active2 and any other clicked item gets the class active (removing activefrom the previously clicked one).

A solution would look like this:

  • If there is no item in the list with class active, none was selected before, so you add active to the current one.
  • If there is one, but no element has class active2, add active2 to the item with class active, remove active and add it to the current item.
  • If both, active and active2 exist, remove active from that item and add active to the current one.

This would look like this in code:

var $lis = $("#myList li");

$('#myList').on('click', 'li', function() {
    if($lis.hasClass('active')) {
        if(!$lis.hasClass('active2')) {
            $lis.filter('.active').toggleClass('active active2');
        }
        else {
            $lis.filter('.active').removeClass('active');
        }
    }
    $(this).addClass('active');
});

Alternatively, since after the second time an item was clicked, there will always be elements items with these classes, you could also simply use flags instead of searching for the elements over and over again.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
0

Revised answer to revised question:

$(document).ready(function() {
    $('ul#myList li:not(.active)').click(function() {
        // user has clicked on an li that does not have class="active"
        $(this).addClass('active');
        $('ul#myList li.active').each(function() {
            // for each li with class="active", remove it and add "active2"
            $(this).removeClass('active').addClass('active2');
        });
    });
});
KRyan
  • 7,308
  • 2
  • 40
  • 68