2

divに移動しようとすると、このスライダーをホバーさせようとしています。これをドロップダウンメニューに使用します。

http://jsfiddle.net/ANFRD/263/

  <a href="#" id="toggleLink">Click Here</a>
  <div class="toggledDiv">This is the content of the toggled div</div>
  <div class="alwaysVisible">This is the content of the always visible div</div>

そして、JS

var toggleState = true;
$('#toggleLink').hover(function () {
if (toggleState) {
    $('.toggledDiv').stop().animate({
        height: 80
    }, 500);
} else {
    $('.toggledDiv').stop().animate({
        height: 0
    }, 500);
}
toggleState = !toggleState;
return false;
});
4

1 に答える 1

0

mouseoveronを使用しa.toggleLinkて div を表示することでこれを実現しました。次にmouseleave、toggleWrapperdivを非表示にします。ラッピング div を使用したくない場合 (これにより、上にカーソルを置いたときに上にスライドするのを防ぐことa.toggleLinkができます$('.toggleWrapper')。$('.toggledDiv')

働くフィドル

補足として、ID を削除し、代わりにクラスを使用していることに注意してください。スタイルを変更してクラスを使用することをお勧めします。

<div class='toggleWrapper'>
    <a href="#" class="toggleLink">Click Here</a>
    <div class="toggledDiv">This is the content of the toggled div</div>
</div>
<div class="alwaysVisible">This is the content of the always visible div</div>

次に、スタイルを次のように変更します。

.toggleLink{
  display:block;
  width:100%
}

JavaScript

$('a.toggleLink').mouseover(
    function () {
        $('.toggledDiv').animate({height: 80}, 500);
    }
);                 

$('.toggleWrapper').mouseleave(
    function(){
        $('.toggledDiv').stop().animate({height: 0}, 500);
    }
);
于 2013-03-08T20:32:42.393 に答える