PageAdmin网站内容管理系统(CMS)交流论坛

注册

 

QQ登录

只需一步，快速开始

返回列表
发新话题 回复该主题
查看: 2511|回复: 14

怎么把部分子栏目隐藏，点击“更多“时再现？ [复制链接]

xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
1#
t T
发表于 2017-01-08 11:28 |只看楼主
怎么把部分子栏目隐藏，点击“更多“时再现？期待你的回答，谢谢！
分享 转发
TOP
xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
2#
t T
发表于 2017-01-08 11:30 |只看楼主


怎么把部分子栏目隐藏，点击“更多“时再现？期待你的回答，谢谢！
TOP
xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
3#
t T
发表于 2017-01-08 11:33 |只看楼主

把上图中蓝色部分隐藏起来后，点击更多时再显示出来，隐藏好做，再现困难啊，，望高手指点。？
TOP
xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
4#
t T
发表于 2017-01-08 13:34 |只看楼主

期待回答！
TOP
xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
5#
t T
发表于 2017-01-08 16:58 |只看楼主

等待回答中
TOP
xiyou
头像

  • 管理员
  • 16163
  • 26868
  • 2015-11-29
6#
t T
发表于 2017-01-09 09:04 |只看该用户

这要用到js或jq
PageAdmin CMS-想到就能做到！
TOP
xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
7#
t T
发表于 2017-01-09 09:28 |只看楼主

不会啊，具体该咋做？
TOP
xiyou
头像

  • 管理员
  • 16163
  • 26868
  • 2015-11-29
8#
t T
发表于 2017-01-09 10:10 |只看该用户

说起来有点麻烦，也不好说，要懂一些js或jq做起来就简单些
PageAdmin CMS-想到就能做到！
TOP
xiyou
头像

  • 管理员
  • 16163
  • 26868
  • 2015-11-29
9#
t T
发表于 2017-01-09 11:02 |只看该用户

做了一个案例；你可以参考下。
<!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 lit(4)").hide();
$(".div ul").append("<div class='btn' style='height:35px;width:120px;border:1px solid #000'>更多</div>");
}
$(".btn").click(function(){
      $(".div ul lit(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>
PageAdmin CMS-想到就能做到！
TOP
xiyou
头像

  • 管理员
  • 16163
  • 26868
  • 2015-11-29
10#
t T
发表于 2017-01-09 11:03 |只看该用户

将表情改为即可
PageAdmin CMS-想到就能做到！
TOP
xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
11#
t T
发表于 2017-01-09 16:02 |只看楼主

还得写这个js文件？<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
TOP
xiyou
头像

  • 管理员
  • 16163
  • 26868
  • 2015-11-29
12#
t T
发表于 2017-01-09 16:23 |只看该用户

不用，这只是一个js库
PageAdmin CMS-想到就能做到！
TOP
xiangbin0326
头像

  • PageAdmin高手
  • 617
  • 1194
  • 2016-08-18
13#
t T
发表于 2017-01-09 18:18 |只看楼主

研究研究，就是不知道各部分放在哪
TOP
xiyou
头像

  • 管理员
  • 16163
  • 26868
  • 2015-11-29
14#
t T
发表于 2017-01-10 09:24 |只看该用户

<style>
.hides{display:none;}
.btn1{height:35px;width:120px;border:1px solid #000;color000;font-size:16px;line-height:35px;}
.btn2{height:35px;width:120px;border:1px solid #000;color000;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 lit(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 lit(4)").show();
    
      $(".btn1").addClass("hides")
      $(".btn2").removeClass("hides")
    })
$(".btn2").click(function(){
      $(".nav_menu ul lit(4)").hide();
      $(".btn1").removeClass("hides")
      $(".btn2").addClass("hides")
    })
  })
</script>

你直接将这段代码复制到head自定义区域里就行，看看效果怎样。
PageAdmin CMS-想到就能做到！
TOP
xiyou
头像

  • 管理员
  • 16163
  • 26868
  • 2015-11-29
15#
t T
发表于 2017-01-10 09:25 |只看该用户

PageAdmin CMS-想到就能做到！
TOP
上一主题| 下一主题
返回列表
发新话题 回复该主题
高级编辑器高级编辑器