0

私はこのHTMLコードを持っています

<ul>
        <li><a href="#">test1</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li><a href="#">d</a></li>
                </ul>
            </div>
        </li>
    </ul>

その div.sub-menu は css に隠されています。親liの中にあるfind divにカーソルを合わせて表示したいのですが、jqueryで試してみますが、タグにカーソルを合わせると2つのサブメニューdivが表示され、test1にカーソルを合わせるとdiv.sub-menuが1つ表示されます。 2,3,4 および test4 にカーソルを合わせると、a、b、c、d を持つ div.sub-menu が表示されます

4

4 に答える 4

1

You can attach a handler for the mouseenter and mouseleave events that manipulates the associated sub-menu, for example like this:

$(document)
   .on("mouseenter", "ul > li > a", function() {
      $(this).siblings(".sub-menu").show();
   })
   .on("mouseleave", "ul > li", function() {
     $(this).children("a").next(".sub-menu").hide();
   });

This snippet installs delegated event handlers that show and hide the sub-menus -- note that the "hide" trigger is different from the "show" trigger because we don't want the menu to disappear as soon as the mouse pointer moves off the anchor. See it in action.

However depending on the desired result you might also be able to do this with pure CSS, e.g.

ul > li > a + .sub-menu { display: none }
ul > li:hover > a + .sub-menu { display: inline-block }

See it in action.

Both versions are structured so that they work also for nested sub-menus.

于 2013-10-10T09:14:41.373 に答える
0

/ を非表示/表示するだけsub-menuです。mouseovermouseout

Javascript

$("li").mouseover(function(){
    $("ul", this).show();
});

$("li").mouseout(function(){
    $("ul", this).hide();
});

JS フィドル: http://jsfiddle.net/EDufY/

于 2013-10-10T09:13:52.450 に答える
0

li のホバー効果でメニューを表示したい場合は、javascript は必要ないと思います。

cssを変更すれば可能です。

のようにcssを書きます。

  .sub-menu
  {
    display:none;
  }
  li:hover .sub-menu
  {
     display:block
  }

そして、マルチレベルのメニューがあり、それらにIDを与えて上記の手順を繰り返します

于 2013-10-10T09:20:02.717 に答える
0

スライド効果でこれを試してください、http://jsfiddle.net/SmtQf/1/ 

$(function () {
   $('ul li').hover(
      function () {
          $('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
      }, function () {
          $('.sub-menu', this).stop(true, true).slideUp();  /*slideUp the subitems on mouseout*/
   });
});
于 2013-10-10T09:24:47.783 に答える