zoukankan      html  css  js  c++  java
  • jquery实现隐藏,简化和更多

    HTML代码:

    <div class="box">
    <div class="header">
    <h3>图书分类</h3>
    <span><img src="images/11_03.gif" height="20" width="20" alt="" /></span>
    </div>
    <div class="content">
    <ul>
    <li><a href="#">小说(1110)</a></li>
    <li><a href="#">文艺(230)</a></li>
    <li><a href="#">青春(1430)</a></li>
    <li><a href="#">少儿(1560)</a></li>
    <li><a href="#">生活(870)</a></li>
    <li><a href="#">社科(1460)</a></li>
    <li><a href="#">管理(1450)</a></li>
    <li><a href="#">计算机(1780)</a></li>
    <li><a href="#">教育(930)</a></li>
    <li><a href="#">工具书(3450)</a></li>
    <li><a href="#">引进版(980)</a></li>
    <li><a href="#">其它类(3230)</a></li>
    </ul>
    <div class="bot">
    <a href="#">简化</a>
    </div>
    </div>
    </div>

    jQuery代码:

    $(".header").click(function() {
    if($(".content").is(":visible")){
    $(".header span img").attr("src","images/11_05.gif");
    $(".content").css("display","none");
    }else
    {
    $(".header span img").attr("src","images/11_03.gif");
    $(".content").css("display","block");
    }
    })
    $(".content .bot > a").click(function() {
    if($(".content .bot > a").text()=="简化")
    {
    $("li :gt(4) :not(:last)").hide();
    $(".bot>a").text("更多");
    }else{
    $("li :gt(4) :not(:last)").show();
    $(".bot>a").text("简化");
    }

    })

  • 相关阅读:
    C++: std::string 与 Unicode 如何结合?
    C++ :enum及其使用
    C++标准库(二)
    #ifdef 中的逻辑与或操作
    这是我的第一篇博客
    C++标准库(一)
    ASP.NET基础05_页面跳转与传值
    ASP.NET基础06_琐碎
    ASP.NET基础04_简单数据绑定与App_Offline.htm文件
    ASP.NET基础01_验证与缓存
  • 原文地址:https://www.cnblogs.com/eyunhua/p/3710901.html
Copyright © 2011-2022 走看看