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("简化");
    }

    })

  • 相关阅读:
    【bzoj2006】超级钢琴
    【bzoj4940】这是我自己的发明
    【arc076E】Connected?
    【agc004C】AND Grid
    选举
    几何
    打击目标
    【CF Gym100228】Graph of Inversions
    【CodeChef】Chef and Graph Queries
    大包子玩游戏
  • 原文地址:https://www.cnblogs.com/eyunhua/p/3710901.html
Copyright © 2011-2022 走看看