1

ナビゲーションバーでjQueryアニメーションが2回実行されるのに問題があります。マウスを1回押すと、下に飛んでから元に戻ります。表示されたままになりません。2回以上マウスを動かすと、適切な効果が得られます。Navの設定方法は次のとおりです。

<div id="nav">
<ul>
  <li><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul>
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
...
</ul>

脚本：

<script type="text/javascript">
$('body').ready(function() {
$('li').hover(function() {
$(this).find('li').slideToggle(); 
});
});
</script>
4

2 に答える 2

1

これはドロップダウンメニュー用だと思いますか？

リストアイテムだけでなく、リスト全体をスライドさせたいと思うでしょう。

<script type="text/javascript">

    $(function() {
        $('li').hover(function() {
            $(this).find('ul').slideToggle(); 
        });
    });

</script>

マウスアウトで非表示にしたい場合は...

<script type="text/javascript">

    $(function() {
        $('li').mouseenter(function() {
            $(this).find('ul').slideDown(); 
        }).mouseleave(function(){
            $(this).find('ul').slideUp(); 
        });
    });

</script>

または、あなたの質問を完全に読み逃す可能性があります。

うまくいけば、これが役に立ちます。

于 2012-05-09T19:12:06.607 に答える
1

JSFiddleでこれを試してください

HTML

<div id="nav" style="width:200px">
<ul style="border:1px solid red">
  <li class="topMenuItem"><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul style="display:none">
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
</ul>
</div>

JavaScript </p> 

$(document).ready(function(){
    $('.topMenuItem').mouseenter(function() {
        $(this).find('ul').slideDown();
    });

    $('.topMenuItem').mouseleave(function(){
        $(this).find('ul').slideUp();
    });
​});
于 2012-05-09T19:14:23.907 に答える