实现折叠功能

最新推荐文章于 2022-04-24 07:31:31 发布

weixin_34174322

最新推荐文章于 2022-04-24 07:31:31 发布

阅读量219

点赞数

文章标签： java javascript python ViewUI

原文链接：https://my.oschina.net/zjItLife/blog/410193

版权

2019独角兽企业重金招聘Python工程师标准>>>

首先，少说废话，上页面。

今天和大家分享下网页折叠功能的制作过程。

首先就是用div来画界面。我的代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="basePath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo1</title>
 
   <script type="text/javascript" src="${basePath}/js/test/jquery.js"></script>
 
   <style>
     .main{
      margin-top:20px;
      background-color:#F7F7F7;
      width:300px;
     }
     .level1{
      background-color:#CDCDC1;
      text-align:center;
     }
     .level2 ul li{
      list-style-type:none;
      padding-top:5px;
      display:block;
     }
     
     .red{
      color:red;
     }
     .img{
     width:100px;
     height:100px;
     float:left;
     }
     .insert1{
     display:none;
     }
   </style>
  
    <script type="text/javascript">
    $().ready(function(){
      $("#ul1").unbind("click").bind("click",change_group); 
        /*  $("#ul1").click(function(){
          alert("12");
          
          
         }); */
         function change_group(){
          $(".insert1").toggle();
         }
      
    });
  
   
    
   
    
     /*
     
      jQuery.foo=function(){
        alert("this a test");
       }
       jQuery.bar=function(param){
        alert("function takes a "+param);
       } 
       
       jQuery.extend({ //扩展此处无需等号
        foo:function(){
         alert("this is a foo");
        },
        bar:function(param){
         alert("this is a function"+param);
        }
       });
       
       jQuery.myplace=({ //命名空间，该区域有个等号
        foo:function(){
         alert("this is a foo");
        },
        bar:function(param){
         alert("this is a function"+param);
        }
       });
       $.myplace.foo();
       $.myplace.bar("刘艳鹏");
       */
       //对象级别的插件开发
       //第一种形式
       /* (function($){
        $.fn.extend({
         plugName:function(){
          alert("对象级别实现的插件");
         }
        });
       })(jQuery);
       $.ready(function(){
        alert("2");
        $("#tt").click(function(){
            alert("tt");
            $("#main").plugName();
           });
           
       }); */
      
       //第二种形式
    </script>
</head>
<body>
   <div class="main">
    
     <div class="level1">人气品牌     </div>
     <div class="level2">
     <ul style="float:left;padding-left:20px;width:300px;">
       <li ><span id="ul1">1 雅诗兰黛</span>
       <div class="insert1">
        <span ><img class="img" src="${basePath}/images/insert/pic2.jpg"/></span>
        <span style="text-align:left;margin-top:30px;height:100px;" >
              <div style="padding-top:40px;" >香奈儿</div>     
              <div style="padding-top:10px;">产品数：<span class="red">557</span></div>
              <div style="padding-top:10px;">关注数：<span class="red">717616</span></div>   
        </span>
       </div>
       </li>
       <li style="clear:both;">2 欧珀莱</li>
       <li>3 巴黎欧莱雅</li>
       <li>4 兰芝 </li>
     </ul>
     </div>
    
    <!-- <div class="level1">
        <div class="level2">网友最长草   </div>
    </div>
     
    <div class="level1">
       <div class="level2">最新化妆品     </div>
    </div> 
    
    <div class="level1">
     <div class="level2">人气品牌     </div>
    </div> -->
   </div>
</body>
</html>

目测整个页面是由上下组成。并且下部分的代码由ul列表组成。每个列表里面都有一个<div>画出来的区域，该区域就是要展示li的详细信息。

第一个要注意的问题就是图片旁边的文字环绕效果。我用了个本方法float:left 和把文字添加到div中实现。该实现方法我觉得有问题，请哪位高人指点下。

第二个要注意的就是li点击效果的实现一定是要在$().ready(function(){})中。大家切记这一点。我刚开始就是没写这个，我发现怎么也没反应，于是乎就开始疯狂换jquery文件，于是乎一个多小时的宝贵时间就这么浪费了。

第三个是toggle（）方法。该方法就是在页面信息隐藏的时候帮助显示，显示的时候帮助隐藏的功能。帮助手册上标注：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。所以使用较高版本jquery的人需要注意下。

转载于:https://my.oschina.net/zjItLife/blog/410193