将“单击”功能更改为鼠标悬停/鼠标悬停

Question

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

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

目前，当点击 .btn-slide 按钮时，slidetoggle 功能被激活。这会向上滑动“面板”div。

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

我是 js 的新手，因此我们将不胜感激。这是我想要做的：

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

我能够让它工作到滑动切换功能会关闭其中一个或另一个，但不能同时关闭的位置。

提前感谢您的帮助。

此致，

苹果机

---

这里是 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;
}

Answer 1

当您从 .btn-slide 移到 #panel 时，它现在会隐藏它，因为它会触发 .btn-slide 的 mouseleave 事件。

为防止这种情况，您应该执行以下操作：

HTML：

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

jQuery:

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

确保在您的 CSS 中将面板设置为从一开始就隐藏...

div#panel {
     display: none;
}