jquery打開菜單onclick，停止它們並添加兒童

我處於瘋狂的情況。我是一名初學者。（你甚至可以說不是初學者）我正在嘗試開放菜單（水平）onclick。它將是4級。我通過在Google和我的朋友中搜索完成了第二級別。但我現在不能接受。我知道我會在Google上找到需要的東西，但這需要很長時間。我仍在尋找它。我正要成爲一名初學者的寫手。jquery打開菜單onclick，停止它們並添加兒童

我問的是打開4個級別（4列）並關閉打開的級別點擊任何地方。

這是一個很好的網站，有很多我正在尋找的信息。

這些是我的index.html和我的CSS。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" href="css/screen.css?v=2011041201" type="text/css" media="screen,projection" /> 
     <script src="js/jquery-1.6.4.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".sutun a").click(function(){}); 
      $(".sutun a").live("click",function() { 
       $(this).parents("li").siblings().children().removeAttr("class"); 
       //$(".sutun a").removeAttr("class"); 
       $(this).addClass('secili'); 
       //which level we in right ? 
       var level = parseInt($(this).parents(".sutun").attr("level")); 
       // maximum 4 levels right ? 
       if(level > 3){ 
        //alert("Hobaa!!"); 
        return false; 
       } 
       //removing levels right ?    
       $(".sutun").each(function(i, m){ 
        if($(this).attr("level") > level){ 
         $(this).remove(); 
        } 
       }); 
       // opening column right ? 
       var yeni_sutun = $('<div class="sutun" level='+(level+1)+'></div>'); 
       //choosing which data right ? 
       var s = $(this).attr("rel"); 
       // adding data right ? 
       yeni_sutun.load("load"+s+".htm"); 
       // adding dom to column right ?    
       $("#sutunkap").append(yeni_sutun); 
      }); 
     }); 
     </script> 
     <title>title what ?</title> 
    </head> 
    <body> 
     <div id="kap"> 
      <div id="ust"></div> 
      <div id="logo"></div> 
      <div id="menu"></div> 
      <div id="icerik"> 
       <div id="sutunkap"> 
        <div class="sutun" level="1"> 
         <ul> 
          <li><a href="javascript:;" rel="1">link1</a></li> 
          <li><a href="javascript:;" rel="2">link2</a></li> 
          <li><a href="javascript:;" rel="3">link3</a></li> 
          <li><a href="javascript:;" rel="4">link4</a></li> 
          <li><a href="javascript:;" rel="5">link5</a></li> 
          <li><a href="javascript:;" rel="6">link6</a></li> 
          <li><a href="javascript:;" rel="7">link7</a></li> 
          <li><a href="javascript:;" rel="8">link8</a></li> 
          <li><a href="javascript:;" rel="9">link9</a></li> 
          <li><a href="javascript:;" rel="10">link10</a></li> 
          <li><a href="javascript:;" rel="11">link11</a></li> 
          <li><a href="javascript:;" rel="12">link12</a></li> 
         </ul>     
        </div>    
       </div> 
      </div> 
      <div id="footer"></div> 
     </div> 
    </body> 
</html>

這是我的css和cssreset。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 

table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 

fieldset,img { 
    border:0; 
} 

address,caption,cite,code,dfn,em,strong,th,var { 
    font-style:normal; 
    font-weight:normal; 
} 

ol,ul { 
    list-style:none; 
} 

caption,th { 
    text-align:left; 
} 

h1,h2,h3,h4,h5,h6 { 
    font-size:100%; 
    font-weight:normal; 
} 

q:before,q:after { 
    content:''; 
} 

abbr,acronym { 
    border:0; 
} 

.cl { 
    clear:both; 
} 

body { 
    font: 62.5%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif; 
    color: #000000; 
} 

strong, b { 
    font-weight: bold; 
} 

em, i { 
    font-style: italic; 
} 

a:active, a:focus { 
    outline: none; 
} 

#kap { 
    width: 960px; 
    text-align:left; 
    margin:0 auto; 
    font-size:13px; 
} 

.sutun{ 
    margin-top: 250px; 
    width: 265px; 
    float:left; 
    min-height:300px; 
    /*border:1px solid #c0c0c0;*/ 
} 

.sutun li a{ 
    background: #fafafa; 
    display:block; 
    text-decoration: none; 
    height:27px; 
    line-height:27px; 
    padding:2px 25px 2px 10px; 
    color: #009; 
} 

.sutun li a:hover{ 
    font-weight: bold; 
    color: #006; 
    background: #d8d0ab url(../img/hover.gif) no-repeat bottom right; 
} 

ul a:focus, ul a.secili { 
    background: #e45f25 url(../img/hover.gif) no-repeat top right; 
    color: #fff; 
} 

ul a:focus:hover, ul a.secili { 
    background-image: #ffae00 url(.../img/hover.gif) no-repeat top right; 
} 

.sutun a: { 
    background-image: url(.../img/halka.png) no-repeat top left; 
} 

.backgr { 
    background:#dedede; display:inline 
} 

.secili { 
    background-image: url(../img/hover.gif); 
}

和例子load1.htm文件

<ul> 
    <li><a href="javascript:;">jslink1</a></li> 
    <li><a href="javascript:;">jslink2</a></li> 
    <li><a href="javascript:;">jslink3</a></li> 
    <li><a href="javascript:;">jslink4</a></li> 
    <li><a href="javascript:;">jslink5</a></li> 
    <li><a href="javascript:;">jslink6</a></li> 
    <li><a href="javascript:;">jslink7</a></li> 
</ul>

來源

2011-11-02 oyunforkom