zoukankan      html  css  js  c++  java
  • Jquery(自己使用)

    jquery折叠列表

    <!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>JQuery学习</title>

    </head>

    <body>
    <ul>
    <li>Item1</li>
    <li>Item2
    <ul>
    <li>Item2.1</li>
    <li>Item2.2</li>
    <li>Item2.3</li>
    </ul>
    </li>
    <li>
    Item3
    <ul>
    <li>Item3.1
    <ul>
    <li>Item3.1.1</li>
    <li>Item3.1.2</li>
    <li>Item3.1.3</li>
    </ul>
    </li>
    <li>Item3.2
    <ul>
    <li>Item3.2.1
    <ul>
    <li>Item3.2.1.1</li>
    <li>Item3.2.1.2</li>
    <li>Item3.2.1.3</li>
    <li>Item3.2.1.4</li>
    <li>Item3.2.1.5</li>
    <li>Item3.2.1.6</li>
    </ul>
    </li>
    <li>Item3.2.2</li>
    <li>Item3.2.3</li>
    </ul>
    </li>
    </ul>
    </li>

    <li>
    Item4
    <ul>
    <li>Item 4.1</li>
    <li>Item 4.2</li>
    <li>Item 4.3</li>
    </ul>
    </li>
    </ul>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

    $('li:has(ul)').click(function(event){
    if(this==event.target){
    $(this).children().toggle('slow');
    }
    return  false;
    }).children().hide();

    /*

    $('li:has(ul)').children().hide();
    $('li:has(ul)').click(function(event){
    if(this==event.target){

    if($(this).children().is(':hidden')){
    $(this).children().show();
    }else{
    $(this).children().hide();
    }

    }
    return  false;
    }).click();

    */

    });

    </script>
    </body>
    </html>

    核心部分就在红色代码部分,很简单的几句代码!

    当然实现这种效果的方法很多,注释的部分就是另一种实现方式,结果是一样的,可以把注释去掉,同时注释掉红色代码,试试看!

  • 相关阅读:
    分布式文件系统--->fastDFS
    varnish4.0缓存代理配置
    varnish4.0缓存代理配置
    varnish4.0缓存代理配置
    SDN 是什么
    SDN 是什么
    SDN 是什么
    Solidworks如何保存为网页可以浏览的3D格式
    github 的 配置SSH
    当一个实例被创建,__init__()就会被自动调用
  • 原文地址:https://www.cnblogs.com/kojya/p/2429038.html
Copyright © 2011-2022 走看看