3

这是我在这里的第一篇文章，我真的希望有人可以帮助我。我在互联网上搜索了很多，但我没有找到任何有用的东西。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
 $(document).ready(function() {
     $('#box').hover(
         function () {
           $(this).animate({left:"+=180px"}, "fast");
         },
         function () {
           $(this).animate({left:"-=180px"}, "slow");
         }
     );

   });
</script>
</head>
<body>

<div id="box" style="background:#98bf21;height:900px;position: absolute;left:-180px; width:200px;">
<div id="skinDiv">
    <select name="skin">
    <option value="">[ None ]</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="White">White</option>
    </select>
</div>
</div>

</body>
</html>

我正在处理一个网页，我想在左侧有一个动画菜单。当用户想从菜单中选择某些东西时，他可以将其悬停，菜单将从显示器左侧到达特定页面，例如向左 +200px。用户将有下拉菜单，他可以从中选择一些东西。

问题是，当用户关注此 html 选择元素时，例如在列表元素父 div 上失去焦点，用户无法从下拉列表中选择任何内容，因为下拉列表也会隐藏。

我希望我很清楚，如果没有，我会尝试解释更多。

我希望您能帮助我解决问题，因为我尝试解决了几天，但没有成功。

问候，米哈

4

3 回答 3

1

试试这个：

$(document).ready(function() {
    $('#handle').mouseenter(slideIn);
    $("#box").mouseleave(function() {
        $(this).animate({
            left: "-=180px"
        }, "slow");
        $('#handle').mouseenter(slideIn);
    });
    $("[name='skin']").mouseleave(function(e) {
        e.stopPropagation();
    });

});

function slideIn() {
    if ($("#box")) $("#box").animate({
        left: "+=180px"
    }, "fast");
    $(this).unbind("mouseenter");
}

演示：http: //jsfiddle.net/PRZYN/

于 2012-11-20T14:24:10.737 回答
0

问题出在您的 jquery 中。试试这个

 $(document).ready(function() {
 $('#box').mouseenter(function () {
       $(this).animate({left:"+=180px"}, "fast");
     }).
     mouseleave(function () {
       $(this).animate({left:"-=180px"}, "slow");
     });

 });

演示：小提琴

于 2012-11-20T13:38:00.427 回答
0

如果您愿意，您也可以使用 css 来完成，而无需使用 jQuery。

CSS：

#box{
background:#98bf21;
height:900px;
position: absolute;
left:-180px; 
width:200px;
    transition: left 2s;
    -moz-transition: left 2s;
    -webkit-transition: left 2s;
    -o-transition: left 2s;
}
#box:hover{
left: 0px;
}

#box:hover div{
left:100px;
display:block;
}
#skinDiv{
position:relative;
}

在此处查看演示

于 2012-11-20T13:42:13.327 回答