产品使用及交流论坛

首页 » 产品使用交流区 » 安装及使用交流 » 怎么把部分子栏目隐藏，点击“更多“时再现？
xiangbin0326 - 2017/1/8 11:28:53
怎么把部分子栏目隐藏，点击“更多“时再现？期待你的回答，谢谢！
xiangbin0326 - 2017/1/8 11:30:57

12566怎么把部分子栏目隐藏，点击“更多“时再现？期待你的回答，谢谢！
xiangbin0326 - 2017/1/8 11:33:16
把上图中蓝色部分隐藏起来后，点击更多时再显示出来，隐藏好做，再现困难啊，，望高手指点。？
xiangbin0326 - 2017/1/8 13:34:18
期待回答！
xiangbin0326 - 2017/1/8 16:58:58
等待回答中
xiyou - 2017/1/9 9:04:12
这要用到js或jq
xiangbin0326 - 2017/1/9 9:28:07
不会啊，具体该咋做？
xiyou - 2017/1/9 10:10:54
说起来有点麻烦，也不好说，要懂一些js或jq做起来就简单些
xiyou - 2017/1/9 11:02:07
做了一个案例；你可以参考下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

var dul=$(".div").children("ul").children("li");
if(dul.length>5){
  $(".div li:gt(4)").hide();
$(".div ul").append("<div class='btn' style='height:35px;width:120px;border:1px solid #000'>更多</div>");
}
$(".btn").click(function(){
      $(".div ul li:gt(4)").slideToggle();
    })
  })


</script>
<style>
*{
    margin:0;
    padding:0;
clear:both;
    }
ul{}
li{
    list-style:none;
    }
.div{
    width:300px;
    float:left;
    border:1px solid #066;
    }
.div li{
    width:300px;
    height:20px;
    float:left;
    line-height:20px;
    }
</style>
</head>

<body>
<div class="div">
<ul>
  <li>111111111</li>
  <li>222222222</li>
  <li>333333333</li>
  <li>555555555</li>
  <li>444444444</li>
  <li>666666666</li>
  <li>777777777</li>
  <li>888888888</li>
  <li>999999999</li>
  <li>000000000</li>
  <li>111111111</li>
</ul>
</div>
</body>
</html>
xiyou - 2017/1/9 11:03:18
将表情改为即可
xiangbin0326 - 2017/1/9 16:02:19
还得写这个js文件？<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
xiyou - 2017/1/9 16:23:42
不用，这只是一个js库
xiangbin0326 - 2017/1/9 18:18:19
研究研究，就是不知道各部分放在哪
xiyou - 2017/1/10 9:24:54
<style>
.hides{display:none;}
.btn1{height:35px;width:120px;border:1px solid #000;color:#000;font-size:16px;line-height:35px;}
.btn2{height:35px;width:120px;border:1px solid #000;color:#000;font-size:16px;line-height:35px;}
</style>
<script>
$(document).ready(function(){

var $nul=$(".nav_menu").children("ul").children("li");
if($nul.length>5){
  $(".nav_menu ul li:gt(4)").hide();
$(".nav_menu").children("ul").append("<div class='btn1'>更多</div>");
$(".nav_menu").children("ul").append("<div class='btn2 hides'>隐藏</div>");
}
$(".btn1").click(function(){
      $(".nav_menu ul li:gt(4)").show();
    
      $(".btn1").addClass("hides")
      $(".btn2").removeClass("hides")
    })
$(".btn2").click(function(){
      $(".nav_menu ul li:gt(4)").hide();
      $(".btn1").removeClass("hides")
      $(".btn2").addClass("hides")
    })
  })
</script>

你直接将这段代码复制到head自定义区域里就行，看看效果怎样。
xiyou - 2017/1/10 9:25:33
1
查看完整版本: 怎么把部分子栏目隐藏，点击“更多“时再现？
Powered by Discuz!NT Archiver 3.9.913 2001-2026 Comsenz Inc.