search

Home >Web Front-end >HTML Tutorial >html 中的li简单的显示和隐藏_html/css_WEB-ITnose

html 中的li简单的显示和隐藏_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:55:262401browse

页面代码：

图书   >


 
  • 11

    •  
  • |11

    •  
  • |11

    •  
  • |11

    •  
  • |11

    •  
  • |11



  • 小说



     
  • 22

    •  
  • |22

    •  
  • |22

    •  
  • |22

    •  
  • |22

    •  
  • |22


    • 问题：只显示前面3个的11|（即显示红色部分），后面的隐藏掉，当鼠标移到“图书   >”时才全部显示出来，不知道怎么做？添加什么的jq代码。


    回复讨论(解决方案)

    补充：全部显示出这些内容如下

  • 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楼大神，功能是实现了。但是如果后面还有类似图书的层就不能用了。

    图书1   >


     
  • 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/。
    （鼠标移入图书的时候）。
    你帮我做一下小例子就可以了。

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Less.js 2.6.1 发布，CSS 预处理器_html/css_WEB-ITnoseNext article：Facebook亮出HTML5网站广告 企业都想要_html/css_WEB-ITnose

    Related articles

    See more