1

ドロップダウンメニューを作成しようとしています。

しかし、マウスアウトでサブメニュー項目を非表示にすることができませんでした。

動くたびに隠れる

私のjQueryコード:

<script type="text/javascript">
    $(document).ready(function() {
        $('ul ul').hide();
        $('ul li.top_menu_first a').removeAttr("href");
        $('ul li.top_menu_first > a').mouseover(function(event) {
            $(this).parent().find('ul').show('slow');
        });

        $('ul li.top_menu_first ul').mouseout(function(event) {
            $('ul ul').hide('slow');
        });
    });
</script>

私のHTMLコード:

<div id="top_menu">
    <ul>
        <li class="top_menu_first"><a href="http://google.com">ABC</a>
            <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>DEF</a></li>
        <li class="top_menu_first"><a>GHI</a></li>
        <li class="top_menu_first"><a>JKL</a>
            <ul>
                <li><a>4</a></li>
                <li><a>5</a></li>
                <li><a>6</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>MNO</a>
            <ul>
                <li><a>7</a></li>
                <li><a>8</a></li>
            </ul>
        </li class="top_menu_first">
    </ul>
</div>
<div id="footer"></div>

誰か助けてくれたらお願いします

4

2 に答える 2

1

コードはサブメニューmouseOutを追跡します。メニュー名からマウスアウトしたときにサブメニューを非表示にしたいとします。

削除元（ http://jsfiddle.net/qgbtd/）HTMLulにjquery をロードしていることを確認してくださいコメントのように、使用するとより良い動作が得られます$('ul li.top_menu_first ul').mouseout(function(event) {mouseleave()

于 2012-10-13T22:53:56.353 に答える
0

これにはjQueryは必要ないと思います。最初に CSS だけで動作させるようにしてください。これは論理的なステップです。アニメーションが必要な場合は CSS3 トランジションを使用し、アニメーションが本当に必要な場合は jQuery を古いブラウザーのフォールバックとして使用します。

デモ: http://jsbin.com/uqebor/9/edit

ul.menu,
ul.menu ul {
  position: relative;
  list-style: none;
  padding: 0;
  -webkit-transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
}
ul.menu li {
  margin: 1px 0;
}
ul.menu > li {
  float: left;
  margin: 0 .5em;
}
ul.menu a {
  text-decoration: none;
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid black;
  background: white;
}
ul.menu ul {
  visibility: hidden;
  height: 0;
  width: 0;
  opacity: 0;
}
ul.menu li:hover ul {
  width: auto;
  height: auto;
  visibility: visible;
  opacity: 1;
}
于 2012-10-13T23:20:38.010 に答える