访问子下拉列表并尝试选择其中的元素时如何保持父悬停宽度答案

【问题标题】：How to keep on parent hover width when acces child dropdown and try to select element in it访问子下拉列表并尝试选择其中的元素时如何保持父悬停宽度
【发布时间】：2012-11-20 22:24:10
【问题描述】：

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

这是我的代码：

<!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>

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

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

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

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

问候，米哈

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

非常感谢！！！！！！！这正是我想要的，我终于解决了我的问题！再次非常感谢您！

【解决方案2】：

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

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

 });

演示：Fiddle

【讨论】：

您好，感谢您的重播。几个小时前我已经尝试过确切的代码，但它没有用。如果我尝试从下拉列表中选择“红色”选项，则 div 失去焦点并尝试隐藏（例如，执行此命令：$(this).animate({left:"-=180px"}, "slow");) .我想解决这个问题是有原因的，用户可以从列表中选择一些东西，并且动画会留在我的页面上。
问题出在 jquery 中。你是对的！感谢您的帮助，我很感激！

【解决方案3】：

如果你愿意，你也可以用 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;
}

见演示here

【讨论】：

我确实也想过这个选项，但我想让我的代码尽可能简单。而且我还遇到了一些与旧浏览器的兼容性问题...
它可以在除 IE 之外的大多数浏览器上运行，而且您不必为此加载 jquery javascript。
我将在其他一些元素上使用 jquery，所以这不仅仅是案例。此外，我将在市长 manu div 内有一些其他 div，所以我不确定运行它会有多好......
也感谢您帮助解决我的问题。我很感激，我很高兴，有帮助别人的人！再次感谢你的帮助。问候，米哈