js折叠列表的小例子

最新推荐文章于 2024-09-07 20:52:50 发布

lucky ^_^

最新推荐文章于 2024-09-07 20:52:50 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/wgp15732622312/article/details/51934149

版权

本篇博客讲解的是一个小例子，这个例子涉及的范围挺广的，但知识点吗，没有多少。一看就会，属于刚刚入门的那种。

CSS——display/block

display有两个属性值，一个是none，另一个是block，前者会使节点下的部分隐藏，后者会使节点下的部分展开。

js——document

这个东西，准确的还不知道是什么，不过它有很多的方法，其中getElementByTagName能够获得相同元素节点名称的列表。

我认为它类似于一个对象列表。

getElementById：能够获得某个特定iD的元素节点，获得该节点后就能进行下面的操作

一、

className:元素节点的类名称，在JS中可以获得某个元素节点的类名称，也可以给某个元素节点赋值。

二、

innerHtml:节点的文本，在JS中既可以得到某个节点的文本节点，也可以给某个节点赋值文本节点。就是利用元素节点的innerHtml属性。

document

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="treetest.aspx.cs" Inherits="easyuitest.treetest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<style type ="text/css" >
        .off
        {
        	display :none ;
        }
        .yes
        {
        	display:block ;
        }
    </style>
<body>
	<div >
	<a id="d"  οnclick="show()">+</a>
	<span>
	<p>dfdfdfdf</p>
	
	
	
</span>
</div>
	
<script type="text/javascript">
    function show() {
        var x = document.getElementsByTagName('span')[0];
        var y = document.getElementById('d');
        
        
        if (x.className == "off") {
            x.className = "yes";
            y.innerHTML = "+"
            
            //document.write(x.className);
        }
        else {
            x.className = "off";
            y.innerHTML = "-";
         
            //document.write(x.className);
        }
    }
//    x.className = "";
//    document.write("Body 元素 CSS 类为: " + x.className);
//    document.write("<br>");
//    var y = document.getElementById('d').childNodes[0];
//    y.className = "off";
//    document.write("另一种方式: ");
//    document.write(document.getElementById('myid').className);
    
</script>
</body>
</html>