0

を使用したくありません。メイン リンクがホバーされたときにtoggle次の構造を保持するには、何を使用する必要がありますか?nav

現在のjs:

<script type="text/javascript"> 
  $(document).ready(function(){
    $(".downservices").hover(function(){
      $(".servicesdropped").toggle("fast");
    });
  });
</script>

サンプルページ

(サブメニューがポップアップすると、サブメニューがフェードアウトするため、リンクをクリックできないことに注意してください)

4

3 に答える 3

1

アニメーションにこだわらず、JQuery を使用したい場合は、クラスの CSS 可視性ルールを切り替えることができます。

$(document).ready(function()

// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");

{
    $(".downservices").hover(function()
    {
        $(".servicesdropped").css("visibility", "display");
    },
    function()
    {
        $(".servicesdropped").css("visibility", "hidden");
    });
});

可視性を使用すると、要素は DOM 内のスペースを消費しますが、周囲の他の要素の構造と配置が損なわれないように表示されません。欠点は、fadeIn()やなどのアニメーションが機能しfadeOut()ないことです。

于 2012-08-16T16:00:16.740 に答える
0

このように使う

<script type="text/javascript"> 
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>

メニューをホバーアウトするには、これを使用します

<script type="text/javascript"> 
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>
于 2012-08-16T15:57:25.730 に答える