jquery 显示隐藏切换

juqery 显示隐藏    <SCRIPT src="D:/jquery.min.js" type=text/javascript></SCRIPT> 我用的是1.4.3版本,跟换自己的js

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>视频</title> 


<SCRIPT src="D:/jquery.min.js" type=text/javascript></SCRIPT>


<SCRIPT  language="javascript">

$(document).ready(function() { 
        $("h1").next("span").css("display","none");
        $("h2").next("ul").css("display","none");
        
        $("a").click(function(){
            var filepath;
            filepath = $(this).parent().parent().prev().parent().prev().text();
            if(filepath==""){return;}
            filepath = filepath +"/" + $(this).parent().parent().prev().text();
            filepath = filepath +"/" + $(this).text();
            showflashdiv(filepath);
        });

        $("h1").click(function(){
            //设置除了选中其它的h1下的span都隐藏
            $(this).siblings().next("span").css("display","none");

            var jspan = $(this).next("span");
            if(jspan.css("display")=="none"){
                jspan.css("display","block");
            }else{
                jspan.css("display","none");
            }
        });
        
        $("h2").click(function(){
            var jul = $(this).next("ul");
            if(jul.css("display")=="none"){
                jul.css("display","block");
            }else{
                jul.css("display","none");
            }
        });
    });          

</SCRIPT>
<style> 
        *,body,ul,li,h1,h2 { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
body { 
    font: 12px "宋体"; 
    padding-top: 20px; 
} 
#menu {
     z-index:1;
        padding_left:200; 
         width: 200px; 
        margin: auto; 
} 
#menu h1 { 
    cursor: pointer; 
    color:  #191970; 
    font-size: 12px; 
    padding: 5px 0 3px 10px; 
    border: #C60 1px solid; 
    margin-top: 1px; 
    background-color: #E0FFFF; 
} 
#menu h2 { 
    cursor: pointer; 
    color: #777; 
    font-size: 12px; 
    padding: 5px 0 3px 10px; 
    border: #E7E7E7 1px solid; 
    border-top-color: #FFF; 
    background-color: #F4F4F4; 
} 
#menu ul { 
    padding-left: 15px; 
    height: 100px; 
    border: #E7E7E7 1px solid; 
    border-top: none; 
    overflow: auto; 
} 
#menu ul li { 
    padding: 5px 0 3px 10px; 
}</style> 
</head> 

<body> 
<div id="menu"> 
<h1>2015</h1> 
   <span> 
   <h2 >1</h2> 
   <ul> 
    <li><a href="#" >01.wmv</a></li> 
    <li><a href="#" >02.wmv</a></li> 
    <li><a href="#" >03.wmv</a></li> 
    <li><a href="#" >04.wmv</a></li> 
    <li><a href="#" >05.wmv</a></li> 
   </ul> 
   <h2>2</h2> 
   <ul> 
   <li><a href="#" >00163.wmv</a></li> 
    <li><a href="#" >00164.wmv</a></li> 
    <li><a href="#" >00165.wmv</a></li> 
   </ul> 
   <h2>3</h2> 
   <ul> 
    <li><a href="#" >01.wmv</a></li> 
    <li><a href="#" >02.wmv</a></li> 
   </ul> 
   <h2>4</h2> 
   <ul> 
    <li><a href="#" >01.wmv</a></li> 
    <li><a href="#" >02.wmv</a></li> 
    <li><a href="#" >03.wmv</a></li> 
   </ul>            
   <h2>5</h2> 
   <ul> 
    <li><a href="#"  >01.wmv</a></li> 
    <li><a href="#"  >02.wmv</a></li> 
    <li><a href="#"  >03.wmv</a></li> 
    <li><a href="#"  >04.wmv</a></li> 
    <li><a href="#"  >05.wmv</a></li> 
    <li><a href="#"  >06.wmv</a></li> 
   </ul>   
   <h2>6</h2> 
   <ul> 
    <li><a href="#" >01.wmv</a></li> 
    <li><a href="#" >02.wmv</a></li> 
    <li><a href="#" >03.wmv</a></li> 
   </ul> 
</span> 
<h1>2016</h1> 
   <span> 
   <h2 >1</h2> 
   <ul> 
<li><a href="#" >00000.wmv</a></li>
<li><a href="#" >00026.wmv</a></li> 
<li><a href="#" >00027.wmv</a></li> 
<li><a href="#" >00028.wmv</a></li> 
   </ul> 
   <h2 >2</h2> 
   <ul> 
    <li><a href="#" >00036.wmv</a></li>                                                   
    <li><a
href="#">00037.wmv</a></li>                                                
    <li><a href="#" >00038.wmv</a></li>
                                                       
   </ul> 
 </span> 
</div>
</body> 
</html>

 

posted @ 2017-06-20 16:50  不必太用力  阅读(1319)  评论(0编辑  收藏  举报