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时，我希望面板关闭。（但如果鼠标位于任何一个上方，则面板应保持打开状态。）

我能够让它工作到slidetoggle函数将关闭其中一个或另一个，但不是两者都关闭。

提前感谢您的帮助。

此致

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

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

将“Click”功能更改为mouseover / mouseout

1 个答案: