实现思路:定义了一个层(样式为:“.menu_000”),在这个层里有一个层(样式为“.menu_000 .menu_001”)和一个Ul(样式为:.menu_000)。Ul中放有Li,Li中放有对应的项。初始状态Ul的层的样式中“display:none”,这样菜单就折叠了起来。当点击相应的(“.menu_000 .menu_001”样式)的层时,“Ul”层的样式的display进行切换,从而实现展开和闭合。
对应的CSS:
.menu_000
{
    width:155px;
    }
.menu_000 .menu_001
{
    width:155px;
    height:23px;
    background-image:url(../Images/main/menu_001.gif);
    }
.menu_000 ul
{
    list-style-type:none;
    text-align:center;
    margin-left:7px;
    display:none;
    }
对应的Jqeury代码:
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
  $(".menu_001").click(function(i){
  var $divcss=$(this);
  var display=$divcss.siblings("ul").css("display");
  if(display=="none"){
  $divcss.siblings("ul").css("display","");
  }else{
  $divcss.siblings("ul").css("display","none");
  }
  })  })
    
</script>现在的问题:
一,展开闭合的功能实现不了,也不知道是哪里有错误。是不是因为用的样式是从“admin.css”文件中引入的
<link href="CSS/admin.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>这样“jquery-1.4.3.min.js”识别不了?二,怎样修改这里的js代码,才可以实现点击一个层时,这个层的display样式设为""。而刚刚展开的层的display样式则设为“none”。也就是,当打开一个新的时,关闭现在正在打开着的。谢谢各位大侠。
前台相应代码:
 <link href="CSS/admin.css" rel="stylesheet" type="text/css" />    <script src="../Scripts/jquery-1.4.3.min.js" type="text/javascript"></script><script type="text/javascript" language="javascript">
  $(document).ready(function(){
  $(".menu_001").click(function(i){
  var $divcss=$(this);
  var display=$divcss.siblings("ul").css("display");
  if(display=="none"){
  $divcss.siblings("ul").css("display","");
  }else{
  $divcss.siblings("ul").css("display","none");
  }
  })  })
    
</script><div class="menu">
    <div class="menu_blank">
    </div>
    <!--菜单选项卡-->
    <div class="menu_000">
    <div class="menu_001">
    <table class="menu_font_table">
    <tr>
    <td class="menu_font_table_td_001"></td>
    <td class="menu_font_table_td_002">
    <font class="menu_font" ><a href="#" class="menu_table_a">系统设置</a></font>
    </td>
    </tr>
    </table>
    </div>
    <ul>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">系统管理</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">公告管理</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">账号管理</a></td></tr></table></li>
    </ul>
    </div> 
    <!--菜单选项卡-->
    <div class="menu_000">
    <div class="menu_001">
    <table class="menu_font_table">
    <tr>
    <td class="menu_font_table_td_001"></td>
    <td class="menu_font_table_td_002">
    <font class="menu_font" ><a href="#" class="menu_table_a">快捷菜单</a></font>
    </td>
    </tr>
    </table>
    </div>
    <ul>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">商务信息</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">技术信息</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">解惑信息</a></td></tr></table></li>
     <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">寄语信息</a></td></tr></table></li>
    </ul>
    </div> 
    <!--菜单选项卡-->
    <div class="menu_000">
    <div class="menu_001">
    <table class="menu_font_table">
    <tr>
    <td class="menu_font_table_td_001"></td>
    <td class="menu_font_table_td_002">
    <font class="menu_font" ><a href="#" class="menu_table_a">模块管理</a></font>
    </td>
    </tr>
    </table>
    </div>
    <ul>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">关于超软</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">超软动态</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">服务项目</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">最新案例</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">作品下载</a></td></tr></table></li>
    </ul>
    </div> 
    <!--菜单选项卡-->
    <div class="menu_000">
    <div class="menu_001">
    <table class="menu_font_table">
    <tr>
    <td class="menu_font_table_td_001"></td>
    <td class="menu_font_table_td_002">
    <font class="menu_font" ><a href="#" class="menu_table_a">图片管理</a></font>
    </td>
    </tr>
    </table>
    </div>
    <ul>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">Flash图片</a></td></tr></table></li>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">环境图片</a></td></tr></table></li>
    </ul>
    </div> 
    <!--菜单选项卡-->
    <div class="menu_000">
    <div class="menu_001">
    <table class="menu_font_table">
    <tr>
    <td class="menu_font_table_td_001"></td>
    <td class="menu_font_table_td_002">
    <font class="menu_font" ><a href="#" class="menu_table_a">超链接管理</a></font>
    </td>
    </tr>
    </table>
    </div>
    <ul>
    <li><table class="ul_li_table"><tr><td class="menu_font_table_td_001"></td><td class="menu_font_table_td_002"><a href="#" class="menu_table_a">超链接管理</a></td></tr></table></li>
    </ul>
    </div> 
    
    
       
    </div>