0

この要素でjQueryを呼び出そうとしています：

<li class="expanded nolink">
  <span>SERVICES</span>
  <ul class="menu">
    <li class="first leaf">
      <a href="/site/personal_training">PERSONAL TRAINING</a>
    </li>
  </ul>
</li>

SERVICESにカーソルを合わせると、ulクラスの「メニュー」が表示されます。を離れると<li>、再び表示されなくなります。私はすべての必死になり始めている午前を回避しようとしてきました...URLは次のとおりです：http ：//wittmerperformance.com/site/

私がこれまでに持っているスクリプトは次のようになります。

$(function() {
  var fade = $('.menu');
  $('.expanded nolink').hover(function(){
  alert("hello world!");
fade.fadeIn();
  }, function() {
fade.fadeOut();
  });
});

手伝ってくれてありがとう！

4

5 に答える 5

2

jQueryコードにエラーがあり、セレクターが間違っています：

セレクターが何も選択していないため、に変更$('.expanded nolink')すると、コードが機能しない可能性があります。$('.expanded.nolink')

あなたはこのコードを持っています：

<ul>
    <li class="expanded nolink">
        <span>SERVICES</span>
        <ul class="menu">
            <li class="first leaf">
                <a href="/site/personal_training">PERSONAL TRAINING</a>
            </li>
            <li class="leaf">
                <a href="/site/personal_training">PERSONAL TRAINING</a>
            </li>
            <li class="leaf">
                <a href="/site/personal_training">PERSONAL TRAINING</a>
            </li>
        </ul>
    </li>
</ul>

純粋なCSSソリューション

​ul li.expanded ul {display: none;}
ul li.expanded:hover ul {display: block;}​

フィドル： http： //jsfiddle.net/nhhQz/

jQueryソリューション

$(document)​.ready(function(){
    $("ul li.expanded ul").hide();
    $("ul li.expanded").hover(function(){
        $(this).children("ul").stop().fadeIn(400);
    }, function(){
        $(this).children("ul").stop().fadeOut(400);
    });
});​

フィドル： http： //jsfiddle.net/nhhQz/1/

于 2012-10-13T03:50:59.290 に答える
1

セレクターが間違っているため、次を変更する必要があります。

$('.expanded nolink')

に：

$('.expanded.nolink')

fadeToggle次の方法も使用できます。

$(function(){
   $('.menu').hide();
   $('li.expanded').hover(function(){
      $('.menu', this).fadeToggle()
   })
})
于 2012-10-13T03:50:02.087 に答える
1

あなたは基本的に使用することができますhover：

$(document).ready(function(){
    $("ul li.expanded").hover(function(){
        $(this).children("ul").show();
    }, function(){
        $(this).children("ul").hide();
    });
});​

デモ：http：//jsfiddle.net/CU83B/ </ p>

于 2012-10-13T03:55:01.603 に答える
1 
<li class="expanded nolink">
  <span >SERVICES</span>
  <ul class="menu">
    <li class="first leaf">
      <a href="/site/personal_training">PERSONAL TRAINING</a>
    </li>
  </ul>
</li>

$(function() {
  var fade = $('.menu');
  $('.expanded').hover(function(){
  fade.fadeIn();
  }, function() {
fade.fadeOut();
  });
});

作業デモ

デモ2

于 2012-10-13T04:01:11.587 に答える
0

最初にそのLIのIDを指定することをお勧めします。クラスでの呼び出しは、少し緩く結合されています。

<li id="my-id" class="expanded nolink"><span>SERVICES</span><ul class="menu"><li class="first leaf"><a href="/site/personal_training">PERSONAL TRAINING</a></li>

    $("#my-id").hover(
    function(){
      //Show the span
    },

    function(){
    //Hide the span
    }
    );
于 2012-10-13T03:53:17.840 に答える