更改'单击'函数来mouseover/mouseout

我正在使用以下滑动div脚本：

http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

目前，当单击.btn滑动按钮时，滑动切换功能被激活。这向上滑动到"面板"分区。

第二次单击.btn滑动按钮后，面板div将关闭。

我是js的新手，如果有任何帮助，我将不胜感激。以下是我要做的：

1( 当鼠标移到.btn幻灯片类上(而不是单击(时，我希望面板滑出。2( 然后，当鼠标移出.btn幻灯片或#面板时，我希望面板关闭。(但如果鼠标在其中一个上，面板应保持打开状态(。

我能够让它工作到滑动切换函数可以关闭其中一个或另一个，但不能同时关闭两者。

提前感谢您的帮助。

真诚，

Mac

---

这是JS:

<script type="text/javascript"> 
jQuery(function($){
$(document).ready(function(){
    $('.btn-slide').click(function() {
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

});
 });
</script> 
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel"> 
    This is where stuff goes!
</div> 
<p class="slide"><a class="btn-slide">Table of Contents</a></p> 
</div>

我已经玩过CSS来适应我的特定网站，如下所示(原始的js、html、CSS可以从上面的链接中获得(。

div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}

a:focus {
    outline: none;
}
#panel {
    background-color:#F00;
    width: 200px;
    height: 200px; 
    display: none;
    position: absolute;
    bottom: 0px;
}
.slide {
    margin: 0;
    padding: 0;
    /* border-top: solid 4px #422410;  **Adds a line at top of slide button to distibuish it */
    background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
    background: #d8d8d8;
    text-align: center;
    width: 200px;
    height: 31px;
    padding: 0px 0px 0 0;
    margin: 0 0 0 0;
    display: block;
    font: bold 12pt Arial, Helvetica, sans-serif;
    color: #666;
    text-decoration: none;
    position: relative;
cursor: pointer;
/*  background: url(images/white-arrow.gif) no-repeat right -50px;  ** Controls Arrow up/down */
}
.active {
    background-position: right 12px;
}

<div id="trigger">
    <a href="" class="btn-slide">Slide down</a>
    <div id="panel">
        Content of your panel
    </div>
</div>

jQuery(function($) { 
    $(document).ready(function() { 
        $("#trigger").mouseenter(function() {
            $("#panel").slideDown("slow"); 
            $(this).addClass("active"); 
        }).mouseleave(function() {
            $("#panel").slideUp("slow"); 
            $(this).removeClass("active"); 
        });
    }); 
});

div#panel {
     display: none;
}