html_html/css_WEB-ITnoseのliの簡易表示・非表示-htmlチュートリアル-php.cn

html_html/css_WEB-ITnoseのliの簡易表示・非表示

WBOY

リリース： 2016-06-21 08:55:26

オリジナル

2381 人が閲覧しました

页面代码：

图书 >

|11

小说

|22

问問題: 前の 3 つの 11| (つまり、色の部分を表示) だけを表示し、次のボタンを表示し、マウスが「图书 >」に移動すると、すべて表示され、不知道怎么做？

回帰论(解決案)

充電：これらのコンテンツをすべて表示します次のように

|11

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><div id="bbb">图书   ></div><div id="aaa"> <li style="float:left;">11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li></div><script type="text/javascript">function lishow() {	$("#aaa li").show();}function lihide() {	$("#aaa li").slice(3).hide();}$(lihide);var timer;$("#bbb").mouseenter(function(event){	lishow();}).mouseleave(function(event){	timer = setTimeout(lihide, 300);});$("#aaa").mouseenter(function(event){	clearTimeout(timer);}).mouseleave(function(event){	lihide();});</script>

ログイン後にコピー

2 楼大神、機能は実現しています。ただし、後面に同様の図がある場合は使用できません。

|11

图书2 >

|11

場合私が想う図 2 (図 3...) も同様の機能を実現します。修正。

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><div class="bbb">图书1   ></div><div> <li style="float:left;">11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li></div><div class="bbb">图书2   ></div><div> <li style="float:left;">11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li></div><script type="text/javascript">function lishow(t) {	$(t).next().find("li").show();}function lihide(t) {	$(t).find("li").slice(3).hide()}$(function() {	$(".bbb").each(function() {		lihide($(this).next());	});});var timer;$(".bbb").mouseenter(function(event){	lishow(this);}).mouseleave(function(event){	var t = $(this).next();	timer = setTimeout(function() {		lihide(t);	}, 300);});$(".bbb").next().mouseenter(function(event){	clearTimeout(timer);}).mouseleave(function(event){	lihide(this);});</script>

ログイン後にコピー

大神、辛苦你了。我就想做网易http://yuedu.163.com/。
(マウスが図に移動する時期)。