Jquery切换效果

Question

当用户单击其他链接时如何关闭弹出型按钮，如果其他弹出型按钮处于打开状态，则应关闭该弹出型按钮，然后再打开另一个弹出型按钮。即。其中一个应该在另一个打开时关闭。此外，如果用户在页面上单击，则弹出按钮应该关闭。谢谢

以下是我的代码

<script language="javascript" src="js/jquery-1.4.3.min.js"></script>


    <script language="javascript">

         $(document).ready(function(){ 

       // hides the slickbox as soon as the DOM is ready 

       // (a little sooner than page load) 

        $('.slickbox').hide();

       // toggles the slickbox on clicking the noted link 

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400);
    return false;
}); 

      });

</script>     


<a href="#" class="slick-toggle"> link1</a>
<div style="position:relative; outline: 1px dashed orange; padding:0px;">
        <div class="slickbox" style=" outline: 1px dashed blue; width:300px;background-color:#ccc;position:absolute; top:10px; left: 20px;"> 
<ul id="flyoutmenu" >
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>

</div>


<a href="#" class="slick-toggle"> link2</a>
<div style="position:relative; outline: 1px dashed orange; ">
        <div class="slickbox" style=" outline: 1px dashed blue; width:300px;background-color:#ccc;position:absolute; top:10px; left: 20px;"> 
<ul id="flyoutmenu" >
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>

</ul>
</div>
</div>

Answer 1

下面是基本概念，其中span是div的子级。

$('div').click(function() {
    $('span').hide();
    $('span', this).toggle();
})

在http://jsfiddle.net/DPMZ6/查看工作示例

Answer 2

    var mouse_is_inside = false;

$(document).ready(function(){ 

    $('.slickbox').hide();

    $('a.slick-toggle').click(function() {
        $("body").unbind('mouseup');
        closeOtherToggles();
        var obj = $(this).next("div").find(".slickbox");
        obj.toggle(400);
        catchOutsideClick(obj);
        return false;
    }); 
});

function closeOtherToggles(){
    $('div.slickbox').hide(400);
}

function catchOutsideClick(obj){
    obj.hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){
        if(! mouse_is_inside){
            obj.hide(400);
        }
    });
}