0

jQuery を使用してフォームでスライドを作成しましたが、選択ドロップダウンを開くと、フォームがスライドアウトするか、ループインおよびループアウトを開始します。

ここに私のhtmlがあります:

<div id="hoverForm">
  <div id="label">
  </div>
  <div id="hoverForminner">
    <form>
    <!-- lots of form stuff -->
      <select class="dropdowdn" id="dropdowdn">
        <option selected="selected" value="">- Choose -</option>
        <option value="1">- One -</option>
        <option value="2">- Two -</option>
      </select>
    <!-- more form stuff -->
    </form>
  </div>
</div>

そしてJS

jQuery(document).ready(function(){
  $('#hoverForm').hover(
    function(){
      $('#hoverForminner').animate({marginLeft: '0'}, 200);
    },
    function(){
      $('#hoverForminner').animate({marginLeft: '-822px'}, 200);
    }
  );
});

選択を開いた場合にマウスアウトを回避するにはどうすればよいですか?

4

1 に答える 1

0

hoverFormのサイズをドロップダウンとそのオプションよりも大きくすることで、この問題を完全に回避できます。こうすることで、ユーザーがオプションをクリックした後でも、マウス カーソルは要素上にあり、アニメーションをトリガーしません。

http://jsfiddle.net/YNJzF/1/を参照

たとえば、paddingまたはheightプロパティを使用できます。

#hoverForm  {background:green; padding:90px 30px}​

jQuery を使用して、オプションの数に基づいて高さを動的に変更することもできます。

$('#hoverForm').css('height',(originalHeight + $('.dropdowdn option').length*20)+'px')
于 2012-12-12T21:37:27.730 に答える