1

マルチレベルメニューがあります。1つのメニュー項目にマウスを合わせると、この項目にサブメニューがある場合、サブメニュー項目が表示されます。これは通常のドロップダウンメニューアクションだと思います。問題は、マウスがパスから外れている場合にメインメニュー項目からサブメニュー項目にマウスを移動する速度が速すぎると、サブメニュー項目が消えて表示するためにもう一度ホバーする必要があることです。

インターネットで検索して、たくさんのガイドを見つけました

[http://stackoverflow.com/questions/2316213/simple-jquery-dropdown-cleartimeout-settimeout-issues]

上記のガイドを使用した場合、メインメニュー項目間を高速で移動すると、次のサブメニュー項目が表示されますが、前のサブメニューも表示されます（タイムアウト設定があるため）

これを処理する方法はありますか？ヒントを教えてください

コードをhttp://jsfiddle.net/v4aWZ/9/に投稿しました

どうもありがとうございます

4

2 に答える 2

0

HoverIntentを使用して、意図しないホバリングへの応答を減らしてみてください。

于 2012-09-10T22:26:13.200 に答える
0

どうぞ: 簡単なスクリプト

HTML は例を示すためのものです。要点は、JavaScript (+jQuery) を追加し、CSS に次のようなli:hoverプロパティを追加することです。li.hover

#nav li:hover, #nav li.hover {
    /* your css */
}


	/* timeout on hover: big menu */
	var hoverTimeout; //declare timeout
	$('#nav li').hover(function() { //mouse enter
      
		clearTimeout(hoverTimeout); //remove timeout, we're taking over control
		$('#nav li').removeClass('hover'); //clear all that are hovered
		$(this).parents('li').addClass('hover'); //add class to all our parents
      
	},function() { //mouse leave
      
		var $this=$(this); //create local copy
		hoverTimeout = setTimeout(function() {
			$this.parents('li').removeClass('hover'); //un-hover all parents
		},1000); //1 second after we remove our mouse
      
	});
@charset "UTF-8";

body {
  background: #aaa;  
}
nav {
  display: table-row;
    padding: 0;
    margin: 0;
    border: 0;
}
    nav a {
        display: block;
        line-height: 1em;
        text-decoration: none;
    }
    #nav, nav li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
#nav {
    position: relative;
    z-index: 597;
    *display: inline-block;
    padding-left: .75rem;
    display: table-cell;
  width: 99%;
}
    #nav li {
        float: left;
        min-height: 1px;
        vertical-align: middle;
    }
    #nav li.hover, #nav li:hover {
        position: relative;
        z-index: 599;
        cursor: default;
    }
    #nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        bottom: 0;
        left: 0;
        margin-top: 0;
        text-transform: none;
        min-width: 210px;
    }

    #nav ul .hassubmenu>a:after {
        content: "+";
        float: right;
        width: 10px;
        text-align: center;
    }
    #nav ul .hassubmenu:hover>a:after, #nav ul .hassubmenu.hover>a:after { content: "-" }
        #nav ul ul {
            top: 0;
            left: auto;
            right: -99.5%;
        }
    #nav li.hover>ul, #nav li:hover>ul { visibility: visible }
    #nav ul, #nav {
        list-style-type: none;
        padding-left: 0;
    }
#nav>li {
    padding: .5rem;
    background: #ddd;
    border: #56a0d3 solid 2px;
    border-top: none;
    border-bottom: none;
}
  #nav>li+li { border-left: none }
  #nav>li a {
      color: #000;
      font-weight: 700;
      text-decoration: none;
  }
  #nav>li:hover>a, #nav>li.hover>a { opacity: 1 }
#nav ul li {
    position: relative;
    float: none;
    font-weight: 400;
    background: #fff;
    background: transparent\9;
    background: hsla(0,0,100%,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
    zoom: 1;
    padding: 5px 10px;
}
  #nav ul li:nth-child(n) { filter: none }
  #nav ul li:hover, #nav ul li.hover { background: #fff }
    #nav ul li a { line-height: 1.2rem }
    #nav ul li:last-child>a { border-radius: 0 0 3px 3px }
#nav ul li ul li ul li li {
    background: #000;
    background: transparent\9;
    background: rgba(0,0,0,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
    zoom: 1;
    border: 10px solid transparent;
    border-top: 1px solid #ddd;
    border-bottom: none;
}
#nav ul li ul li ul li li:nth-child(n) { filter: none }
#nav ul li ul li ul li li:first-child { border-top: none }
#nav ul li ul li ul li li:last-child { border-bottom: none }
#nav ul li ul li ul li li:hover, #nav ul li ul li ul li li.hover { background: #000 }
#nav ul li ul li ul li li a { color: #62a2d6 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<ul id="nav">

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

于 2015-04-28T13:43:55.163 に答える