Jquery打开菜单onclick，停止他们和添加孩子

我的情况很糟糕。我是一个初学者。(你甚至可以说这不是初学者)我正在尝试打开菜单(水平)点击。它将是4级。我通过谷歌和我的朋友搜索完成了第二级。但我现在不能接受。我知道我会在谷歌上找到我需要的东西，但这要花很多时间。我还在找。我刚开始学javascript。

我的要求是打开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>

查看A List Apart -> http://www.alistapart.com/articles/dropdowns/

关于如何使用列表的一些很棒的文章

相关内容

最新更新

热门标签：