Question

我处于疯狂的境地。我是初学者javascripter。（你可以说不是初学者）我正在尝试打开菜单（水平）onclick。它将是4级。我通过在Google和我的朋友上搜索完成了第二级。但我现在不能接受。我知道我会在Google上找到我需要的东西，但需要花费很多时间。我还在寻找它。我即将成为一名初学者javascripter。

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

Answer 1

查看A List Apart - ＆gt; http://www.alistapart.com/articles/dropdowns/

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

Jquery打开菜单onclick，停止它们并添加子项

1 个答案: