如何製作垂直菜單，使其他菜單隨其展開而下降？

Question

我想創建一個垂直菜單，就像當我單擊父菜單時，子項展開在父項下方，並且它將按下html，css和js中的其他父菜單。將感激不盡！在此先感謝

Answer 1

我想你想說這 DEMO LINK

HTML

<div id="SlideMenu1"> 
<ul> 
    <li class="SlideMenu1_Folder"><div><a>FOLDER 1</a></div><span><!-- empty --></span> 
     <ul style="display:none"> 
     <li><a href="">Item 1</a></li> 
     <li><a href="">Item 2</a></li> 
     </ul> 
    </li> 
    <li class="SlideMenu1_Folder"><div><a>FOLDER 2</a></div><span><!-- empty --></span> 
     <ul style="display:none"> 
     <li><a href="">Item 3</a></li> 
     <li><a href="">Item 4</a></li> 
     </ul> 
    </li> 
    <li class="SlideMenu1_Folder"><div><a> FOLDER3</a></div><span><!-- empty --></span> 
     <ul style="display:none"> 
     <li><a href="">Item1</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

CSS的

#SlideMenu1 ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    font-family: Arial; 
    font-size: 13px; 
} 
#SlideMenu1 li 
{ 
    cursor: pointer; 
} 
#SlideMenu1 li div 
{ 
    margin: 0px 0px 0px 0px; 
    padding: 2px 2px 2px 5px; 
    background-color: #A0A0A0; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #A0A0A0; 
    position: relative; 
    left: 0; 
    top: 0; 
    width: 95px; 
} 
#SlideMenu1 li div:hover 
{ 
    background-color: #666666; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #666666; 
} 
#SlideMenu1 li a 
{ 
    color: #EEEEEE; 
    font-weight: normal; 
    text-decoration: none; 
} 
#SlideMenu1 li a:hover 
{ 
    color: #EEEEEE; 
    font-weight: normal; 
    text-decoration: none; 
} 
#SlideMenu1 li li 
{ 
    cursor: auto; 
    padding: 2px 2px 2px 5px; 
    margin: 1px 0px 1px 0px; 
    background-color: #EEEEEE; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #C0C0C0; 
} 
#SlideMenu1 li li a 
{ 
    color: #666666; 
    font-weight: normal; 
    text-decoration: none; 
} 
#SlideMenu1 li li:hover 
{ 
    background-color: #C0C0C0; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #C0C0C0; 
} 
#SlideMenu1 li li a:hover 
{ 
    color: #666666; 
    font-weight: normal; 
    text-decoration: none; 
} 
#SlideMenu1 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 104px; 
    height: 186px; 
    z-index: 0; 
} 

的Java腳本

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $(".SlideMenu1_Folder div").click(function() 
    { 
     if ($(this).parent().find('ul').is(':hidden')) 
     { 
     $(this).parent().find('ul').show(); 
     } 
     else 
     { 
     $(this).parent().find('ul').hide(); 
     } 
    }); 
}); 
</script> 

Answer 2

此鏈接給你的垂直菜單向下推動其他家長menu's

LINK