ホームページ >ウェブフロントエンド >htmlチュートリアル >html_html/css_WEB-ITnoseのliの簡易表示・非表示
html_html/css_WEB-ITnoseのliの簡易表示・非表示
- WBOYオリジナル
- 2016-06-21 08:55:262380ブラウズ
页面代码：
dc6dce4a544fdca2df29d5ac0ea9906b图书 >16b28748ea4df4d9c2150843fecfba68
614057cc101e4aa0b98f707436fbb75811bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
0166a677f02894de03f4d688efca6f0ebed06894275b65c1ab86501b08a632eb
dc6dce4a544fdca2df29d5ac0ea9906b
614057cc101e4aa0b98f707436fbb75822bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|22bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|22bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|22bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|22bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|22bed06894275b65c1ab86501b08a632eb
问問題: 前の 3 つの 11| (つまり、色の部分を表示) だけを表示し、次のボタンを表示し、マウスが「图书 >」に移動すると、すべて表示され、不知道怎么做？
回帰论(解決案)
充電：これらのコンテンツをすべて表示します次のように
614057cc101e4aa0b98f707436fbb75811bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
<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 楼大神、機能は実現しています。ただし、後面に同様の図がある場合は使用できません。
e1f0bf7a40654ab709b45239ce0f92fe16b28748ea4df4d9c2150843fecfba68
f537cbdfcf10459ae3a7db349d2f97f9
614057cc101e4aa0b98f707436fbb75811bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
df250b2156c434f3390392d09b1c9563
319e39e2dc0c35f79e0571ac4a944e4e图书2 >16b28748ea4df4d9c2150843fecfba68
f537cbdfcf10459ae3a7db349d2f97f9
614057cc101e4aa0b98f707436fbb75811bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
614057cc101e4aa0b98f707436fbb758|11bed06894275b65c1ab86501b08a632eb
場合私が想う図 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/。
(マウスが図に移動する時期)。