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

页面代码：

图书 >

11

|11

|11

|11

|11

|11

小说

22

|22

|22

|22

|22

|22

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

回帰论(解決案)

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

11

|11

|11

|11

|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

|11

|11

|11

|11

|11

图书2 >

11

|11

|11

|11

|11

|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/。
(マウスが図に移動する時期)。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。