CODEWITHSUNDEEP
javascriptjquery
simonfoust
simonfoust

Reputation: 131

Closing container with class (not id) on mouse out or click out

Here is my HTML

<ul class="actions">
    <li><span class="toggle"></span>
        <ul>
            <li><span class="entypo-eye">View File</span></li>
            <li><span class="entypo-download">Download File</span></li>
            <li><span class="entypo-export">Send File</span></li>
            <li><span class="entypo-circled-info">File Properties</span></li>
            <li><span class="entypo-login">Copy To...</span></li>
            <li><span class="entypo-trash">Delete File</span></li>
        </ul>
    </li>
</ul>

Here is my JS

$('.actions .toggle').click(function(){
    $(this).next('ul').toggle();
});

So what I am trying to do now is making the container close on mouseout and/or when someone clicks on another part of the page (any part) --- I need to show an example of each of these (mouseout/click out). So it would be a lot easier to do this when the container in question has an ID, not a class.

But in this case, it can't have an ID because there are going to be several of these kinds of containers on the page. Anyone have any suggestions?

Upvotes: 2

Views: 184

Answers (4)

user3270303
user3270303

Reputation:

HTML

<div class="show_div"> Sort summary <br /> Second Row</div>
<div class="hide_div" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div>

JS

$(function() {
    $(".show_div").mouseover(function() {
        $(this).next().show();
        $(this).hide("slow");
    });

    $(".hide_div").mouseout(function() {
        $(this).prev().show();
        $(this).hide("slow");

    });
});


    http://jsfiddle.net/UG3FZ/

Upvotes: 0

Adil
Adil

Reputation: 148150

You probably need to use find() instead of next() first you need to go to parent li using parent() as find will search in descendant elements. You can learn more about jQuery api here.

Live Demo

$('.actions .toggle').click(function(){  
    $(this).parent().find('ul').toggle();
});

To hide the ul when clicked out side you can try something like

Live Demo

$('.actions .toggle').click(function(event){  
    event.stopPropagation();
    $(this).parent().find('ul').toggle();

});

$('body').click(function(){
    if(!$(this).hasClass('toggle'))
       $('.toggle').parent().find('ul').hide();
});

Upvotes: 1

WhoAmI
WhoAmI

Reputation: 14

and mouseout..

you should use .mouseout() .

demo

$('.actions .toggle').mouseover(function(){  
    $(this).parent().find('ul').show();
});

$('.actions .toggle').mouseout(function(){  
    $(this).parent().find('ul').hide();
});

and

other post

Upvotes: 0

user2575725
user2575725

Reputation:

try this to toggel parent ul using jquery closest:

$('.actions .toggle').click(function(){
    $(this).closest('ul').toggle();
});

Upvotes: 0

Related Questions