Jquery切换效果

Question

当用户点击另一个链接时，如何关闭弹出按钮，如果另一个弹出按钮打开，它应该关闭，然后另一个弹出按钮应该打开。 IE浏览器。当对方打开时，应该关闭。此外，如果用户在页面上单击，则应该关闭弹出按钮。 感谢

这是我的代码

<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

    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);
        }
    });
}

Answer 2

这是基本概念，其中span是div的孩子。

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

检查http://jsfiddle.net/DPMZ6/

处的工作示例