jQuery each function to show a different pop up on each click

Hi I am trying to get this to show up a separate box for each one and I can't figure out how to get the each loop to work right...this code is showing every one at the same time instead of individual boxes...thanks for any help.

<style type="text/css">
.div_ActionsList {
    border:1px solid #ccc;
    min-width:100px;
    max-width:200px;
    position:relative;
    top:5px;
}
.div_actionsClick {
    cursor:pointer;
    font-size:14px;
}
.div_ActionsList ul {
    line-height:18px;

}
.div_ActionsList ul li{
    line-height:18px;
    font-size:14px;
    padding:3px 8px;
}

.div_ActionsList ul li:hover {
    background:#0CF;
    cursor:pointer;
    color:#fff;
}
</style>

<script type="text/javascript">
$(function() {

    $('.div_ActionsList').hide();

    $('.div_actionsClick').each(function(){
        $(this).click(function(){
            $('.div_ActionsList').toggle();
        });
    });
});
</script>

<div class="div_Actions">
    <div class="div_actionsClick">Actions</div>
    <div class="clearBoth"></div>
    <div class="div_ActionsList">
        <br/>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
 开发者_如何转开发               <li>List Item</li>
                <li>List Item</li>
            </ul>
        <br/>
    </div>
    <br/><br/>
    <div class="div_actionsClick">Actions</div>
    <div class="clearBoth"></div>
    <div class="div_ActionsList">
        <br/>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        <br/>
    </div>
    <br/><br/>
</div>

---

Wrap each Click/List pair in another div, then try this modification (note that the each is unneeded, jQuery will bind to all matched elements anyway):

$('.div_actionsClick').each(function(){
    $(this).click(function(){
        $('.div_ActionsList').toggle();
    });
});

Should be:

$('.div_actionsClick').click(function(){
    $(this).parent().find('.div_ActionsList').toggle();
});

Basically the error you are having is because $('.divActionsList') is looking over the entire page and toggling all the divs with the class (which is all of them). By grouping the Click and List with a div, you enable the jQuery to be able to easily find the corresponding list/s by inspecting the DOM nearby the clicked button.

Basically what the above does simply find the parent element of the one that was clicked, then look for all .div_ActionsList inside that, rather than inside the entire page.

---

There are a couple of issues. First, you can bind click to a div by just doing:

$('.classname').click(function(){
//function
});

Then you could toggle by doing something like....

$(this).parent().find('.div_ActionsList').toggle();

So your final code would be:

$('.div_actionsClick').click(function(){
      $(this).parent().find('.div_ActionsList').toggle();
});