jquery滑動菜單，默認摺疊所有菜單

我偷了一個internet教程的腳本，允許jQuery滑動菜單。jquery滑動菜單，默認摺疊所有菜單

該菜單很好，除了默認情況下，第一條父鏈接被展開。我想要默認關閉所有父菜單項。

這裏是JavaScript：

<script type="text/javascript"> 
$(function(){ 
    // hide all links except for the first 
    $('ul.child:not(:first)').hide(); 
    $("a.slide:first").css("background-color",""); 
    // for image 
    // $("a.slide:first").css("background-image","url('path')"); 

    $('ul.parent a.slide').click(function(){ 
     $('ul.parent a.slide').css("background-color",""); 

     $('ul.parent a.slide').hover(function(){ 
      $(this).css("background-color",""); 
     }); 

     $('ul.parent a.slide').mouseout(function(){ 
      $(this).css("background-color",""); 
     }); 

     $(this).mouseout(function(){ 
      $(this).css("background-color",""); 
     }); 

     $(this).css("background-color",""); 


     // slide all up 
     $('ul.child').slideUp('slow'); 

     // show the links of current heading 
     $(this).next().find('a').show(); 

     // slide down current heading 
     $(this).next().slideDown('fast'); 

     // prevent default action 
     return false; 
    }); 
}); 

</script>

完整的頁面代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>title</title> 
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
$(function(){ 
    // hide all links except for the first 
    $('ul.child:not(:first)').hide(); 
    $("a.slide:first").css("background-color",""); 
    // for image 
    // $("a.slide:first").css("background-image","url('path')"); 

    $('ul.parent a.slide').click(function(){ 
     $('ul.parent a.slide').css("background-color",""); 

     $('ul.parent a.slide').hover(function(){ 
      $(this).css("background-color",""); 
     }); 

     $('ul.parent a.slide').mouseout(function(){ 
      $(this).css("background-color",""); 
     }); 

     $(this).mouseout(function(){ 
      $(this).css("background-color",""); 
     }); 

     $(this).css("background-color",""); 


     // slide all up 
     $('ul.child').slideUp('slow'); 

     // show the links of current heading 
     $(this).next().find('a').show(); 

     // slide down current heading 
     $(this).next().slideDown('fast'); 

     // prevent default action 
     return false; 
    }); 
}); 

</script> 

<style type="text/css"> 

a 
{ 
    //outline:none; 
} 

ul 
{ 
    list-style:none; 
} 

ul.parent 
{ 
    margin:0px; 
} 

ul.parent a 
{ 
    display:block; 
    //width:200px; 
    //border-bottom:1px solid #336699; 
    //background:#3399FF; 
    //color:#FFFFFF; 
    //font-weight:bold; 
    //text-decoration:none; 
    //padding:0px; 
    //margin: 0; 

} 

ul.parent a:hover 
{ 
    //color:#000000; 
    //background:#66CC66 
} 

ul.child a 
{ 
    //background:#333333; 
    //color:#FFFFFF; 
    //border-bottom:1px solid #f6f6f6; 
    //font-weight:normal; 
    //margin-left:-40px; 
    //padding:7px; 
    //width:200px; 
    //display:block; 
    //line-height:10px; 
} 

ul.child a:hover 
{ 
    //color:#3333333; 
    //background:#CCCCCC 
} 

</style> 

</head> 

<body> 

    <ul class="parent"> 
     <li> 
      <a href="#" class="slide"><img src="images/organisationbutton.png" border=0></a>    
      <ul class="child"> 
       <li><a href="#"><img src="images/personbutton2.png" border=0></a></li> 
       <li><a href="#"><img src="images/jobsbutton2.png" border=0></a></li> 

      </ul> 

     </li> 
    </ul> 

    <ul class="parent"> 
     <li> 
      <a href="#" class="slide"><img src="images/risksbutton.png" border=0></a> 

      <ul class="child"> 
       <a href="#" class="slide"><img src="images/risksbutton3.png" border=0></a> 
       <a href="#" class="slide"><img src="images/linkriskstojobsbutton.png" border=0></a> 
       <a href="#" class="slide"><img src="images/linkhealthriskstopeople.png" border=0></a> 
      </ul> 

     </li> 
    </ul> 

    <ul class="parent"> 
     <li> 
      <a href="#" class="slide"><img src="images/policiesbutton.png" border=0></a> 

      <ul class="child"> 
       <a href="#" class="slide"><img src="images/trainingrequiredbylaw.png" border=0></a> 
      </ul> 

     </li> 
    </ul> 

    <ul class="parent"> 
     <li> 
      <a href="#" class="slide"><img src="images/trainingbutton.png" border=0></a> 

      <ul class="child"> 
       <a href="#" class="slide"><img src="images/trainingcoursesbutton.png" border=0></a> 
       <a href="#" class="slide"><img src="images/medicalinterventionsbutton.png" border=0></a> 
       <a href="#" class="slide"><img src="images/trainingdonebutton.png" border=0></a> 
      </ul> 

     </li> 
    </ul> 

    <ul class="parent"> 
     <li> 
      <a href="#" class="slide"><img src="images/assessmentbutton.png" border=0></a> 

      <ul class="child"> 
       <a href="#" class="slide"><img src="images/individualtrainingbutton.png" border=0></a> 
       <a href="#" class="slide"><img src="images/departmentcompliancebutton.png" border=0></a> 
      </ul> 

     </li> 
    </ul> 



</body> 
</html>

任何幫助，將不勝感激一如既往，我肯定有一個簡單的解決方案，這一點，但我的javascript技能還處於初級階段。再次

感謝， [R

來源

2012-09-15 Smudger

只要改變這一點：

// hide all links except for the first 
$('ul.child:not(:first)').hide();

與此：

// hide all links 
$('ul.child').hide();

來源

2012-09-15 16:07:59 Kryz

可能只是刪除該兩行就能做到：

// hide all links except for the first 
$('ul.child:not(:first)').hide(); 
$("a.slide:first").css("background-color","");

來源

2012-09-15 16:07:11 Nelson

謝謝，這默認情況下所有父菜單都已展開。感謝努力。 – Smudger

jquery滑動菜單，默認摺疊所有菜單

回答

相關問題