0

こんにちは皆さん、私の最初のウェブサイトに取り組んでおり、を使用してスライド メニューを実装しようとしていますjquery。

これはこれまでに得たものです:

         <a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
         <script type="text/javascript">
         function ShowBox()
         {
           $("#SlideMenu").slideDown();   
         }
         function HideBox()
         {
           $("#SlideMenu").slideUp();
         }
         </script>

コントロールをマウスオーバーすると、メニューが下にスライドしますが、自動的に元に戻ります。私が望むのは、ユーザーがメニューから選択してオプションを選択できるようにすることです。そうでない場合は、マウスがコントロールを離れるとすぐにメニューを閉じたいと思います。

なぜこれが機能しないのか考えていますか? 前もって感謝します。

4

4 に答える 4

2

インライン JS を使用せずに作業を行い、<a>要素を閉じて準備完了関数を使用することを忘れないでください

<a id="test">Show box</a>

<script type="text/javascript">
   $(document).ready(function() {
      $("#test").on({
          mouseenter: function() {
             $("#SlideMenu").slideDown();
          },
          mouseleave: function() {
             $("#SlideMenu").slideUp();
          },
          click: function(e) {
             e.preventDefault();
          }
      });
   });
</script>

フィドル

于 2012-05-09T00:27:13.663 に答える
1

jQuery を使用しているので、次のようなものを使用すると有益だと思います。

$("#box").hover(
   function() {
      //.stop() to prevent propagation
      $(this).stop().animate({"bottom": "200px"}, "fast");                   
   },
   function() {
      $(this).stop().animate({"bottom": "0px"}, "fast");                  
   }
);

これが意味することは、マウスがメニューの上にある間、メニューは開いた位置に留まるということです。マウスがメニューから出ると、メニューは閉じます。もちろん、必要に応じて ID とアニメーションの CSS 値を変更してください :)!

これが実際の例です： http://jsfiddle.net/V3PYs/1/

于 2012-05-09T00:22:00.143 に答える
1

本当に問題はありません。スクリプトは、指定したとおりに実行されます。ただし、私が理解していることから、ユーザーのマウスがメニュー上にある場合、「トリガー」要素を離れたときにメニューを開いたままにする必要があります。これを試して：

<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
    $("#trigger").hover(function(){
        $("#SlideMenu").slideDown();
    }, function(){
        menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
    });

    $("#SlideMenu").hover(function(){
        clearTimeout(menuMouseout);
    }, function(){
        menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
    });
});
</script>

このようにして、ユーザーはトリガー要素からマウスを離してメニューに移動した後、しばらく時間がかかります。タイムアウトをいじる必要があるかもしれませんが、これはうまくいくはずです。私はこれをテストしましたが、うまくいっているようです。必要に応じて、これをラップして、$(document).readyすべての要素がロードされ準備が整っていることを確認してください。

デモ: http://www.dstrout.net/pub/menu.htm

于 2012-05-09T00:35:32.197 に答える
0

jQuery を使用している場合、これは適切な方法です。

<a href="#" id="showBoxHref">Show box</a>

<script type="text/javascript">
    $("#showBoxHref").hover(function() {
        $(this).slideDown();
    }, function() {
        $(this).slideUp();
    });
</script>

（これをコピーして貼り付けるだけで機能するはずです）

于 2012-05-09T00:21:51.107 に答える