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>

私は Web ページに取り組んでおり、左側にアニメーション化されるメニューが必要です。ユーザーがメニューから何かを選択したい場合、ホバーすると、メニューがモニターの左側から特定のページに移動します (例: 左に +200px)。ユーザーにはドロップダウンがあり、そこから何かを選択できます。

問題は、ユーザーがこの html select 要素、たとえばリスト要素の親 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を使用せずに、必要に応じてcssでも実行できます。

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 に答える
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 に答える