用JQuery摺疊菜單

我正在研究需要展開和摺疊的JQuery菜單。不過，我有一些問題需要按照我的意願排列子菜單。基本上，我希望子菜單項與頂層菜單項保持一致。但是，就目前而言，整個子菜單項都是縮進的。我的代碼如下所示：用JQuery摺疊菜單

HTML

<ul id="theMenu"> 
    <li><a title="open or close this section" href="#">Info</a>      
    <ul> 
     <li><a href="#">Basic</a></li> 
     <li><a href="#">Advanced</a></li> 
    </ul> 
    </li> 

    <li><a title="open or close this section" href="#">Documents</a> 
    <ul> 
     <li><a href="#">Newsletters</a></li> 
     <li><a href="#">Policies and Procedures</a></li> 
     <li><a href="#">job Descriptions</a></li> 
    </ul> 
    </li> 
</ul>

的JavaScript

$(document).ready(function() { 
    $("#theMenu > li > a").not(":first").find("+ ul").slideUp(1); 
    $("#theMenu > li > a").click(function() { 
    $(this).find("+ ul").slideToggle("fast"); 
    }); 
});

CSS

#theMenu, #theMenu ul { list-style:none; width:15em; } 
#theMenu a { background:#F6F6F6; color:#010101; 
    display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none; 
    border:1px solid #DFDFDF; 
} 
#theMenu ul a { background:#F6F6F6; color:#010101; 
    font-weight:normal; text-decoration:none; 
} 
#theMenu ul a:hover { background:#F0EBE1; text-decoration:underline; color:#711515; }

如何使子菜單與根菜單的左邊緣齊平？

謝謝！

增加：演示here

來源

2011-02-09 user609886

我無法複製您的問題：http://jsfiddle.net/brianflanagan/sH2WJ/您使用什麼瀏覽器？ –

 
#theMenu, #theMenu ul { list-style:none; width:15em; }

上

 
#theMenu, #theMenu ul { list-style:none; width:15em;margin:0;padding:0; }

來源

2011-02-09 14:47:38

看起來FF確定什麼是瀏覽器使用的是？

來源

2011-02-09 15:12:57 Chin

用JQuery摺疊菜單

回答

相關問題