使用jquery div的手风琴应该关闭

下面是手风琴的代码，我希望页面加载所有的分区默认关闭，当我点击特定的分区时，它会打开，当我点击其他分区时，它会打开并且之前一个自动关闭。注意它应该与ie8兼容。下面使用jquery div的手风琴应该关闭

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <!-- <link href="css.css" rel="stylesheet" />--> 
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="accord.js"></script> 
    <style> 
     .wrap { 
      margin-left: 0px; 
      margin-top: 0px; 
      width: 100px; 
     } 

     .accordion1 { 
      width: 178px; 
      margin: 0px; 
      padding: 0px; 
      list-style: none; 
      border: 1px solid #ddd; 
     } 

      .accordion1 h2 { 
       font-size: 12px; 
       font-weight: bold; 
       font-family: Arial, Helvetica, sans-serif; 
       margin: 0px; 
       text-decoration: none; 
       padding: .25em .25em .25em 2em; 
       color: #333; 
       background: url('compo_images/gradient_v_gray.gif') repeat-x; 
       background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat; 
       border-bottom: 1px solid #ddd; 
       cursor: pointer; 
      } 

       .accordion1 h2:hover { 
        background: url('compo_images/gradient_v_orange.gif') repeat-x; 
        color: white; 
       } 

      .accordion1 li div.content { 
       padding: 3px; 
       background: #fcfbfb; 
       border-bottom: 1px solid #ddd; 
       /*border: 1px solid #ddd;*/ 
      } 

      .accordion1 li:hover h2 { 
       color: white; 
       background-image: url("./compo_images/arrow_exp_n.gif"); 
       background: url('compo_images/gradient_v_orange.gif') repeat-x; 
      } 

     .accord > li { 
      padding: 0; 
      list-style-type: none; 
     } 

      .accord > li > a { 
       text-decoration: none; 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 12px; 
       padding-left: 12px; 
       color: #5f5c5c; 
       background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat; 
      } 

      .accord > li > ul > li > a { 
       text-decoration: none; 
       color: #5f5c5c; 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 11px; 
       background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat; 
       padding-left: 17px; 
      } 

      .accord > li > ul { 
       list-style-type: none; 
       text-align: left; 
       margin: 0; 
       padding: 1px; 
      } 

     .accord { 
      text-decoration: none; 
      padding-left: 5px; 
     } 

      .accord > li > a:hover { 
       color: #f8b106; 
      } 

      .accord > li > ul > li > a:hover { 
       color: #f8b106; 
      } 
    </style> 
</head> 

<body> 
    <div class="wrap"> 

     <ul class="accordion1"> 
      <li> 
       <h2 id="first">CMT</h2> 
       <div class="content"> 
        <ul class="accord"> 
         <li> 
          <a href="#">main link1</a> 
          <ul> 
           <li><a href="#">Link One</a></li> 
           <li><a href="#">Link Two</a></li> 
           <li><a href="#">Link Three</a></li> 
           <li><a href="#">Link Four</a></li> 
           <li><a href="#">Link Five</a></li> 
          </ul> 
         </li> 

         <li> 
          <a href="#">main link2</a> 
          <ul> 
           <li><a href="#">Link One</a></li> 
           <li><a href="#">Link Two</a></li> 
           <li><a href="#">Link Three</a></li> 
           <li><a href="#">Link Four</a></li> 
           <li><a href="#">Link Five</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </li> 
      <li> 
       <h2>FOIS</h2> 
       <div class="content"> 
        content fois 
       </div> 
      </li> 
      <li> 
       <h2>ASP</h2> 
       <div class="content"> 
        content ASP 
       </div> 
      </li> 
      <li> 
       <h2>PTT</h2> 
       <div class="content"> 
        content PTT 
       </div> 
      </li> 
     </ul> 
    </div> 
    <!-- wrap --> 
</body> 
</html>

是accord.js

jQuery(function ($) { 
    $('.accord li').hover(function() { 
     $(this).find('ul').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('ul').stop(true, true).slideUp() 
    }).find('ul').hide() 

})

来源

2013-10-03 user2841408

和问题是什么？ –

问题是所有的部门都打开了，但我想要关闭也当我点击CMT它的部门将打开，当我点击另一个部门时，它会打开和以前的部门关闭 – user2841408

尝试

var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide(); 
$lis.children('h2').click(function(){ 
    var $t = $(this).next(); 
    $contents.not($t).stop(true, true).slideUp(); 
    $t.slideToggle(); 
})

演示：Fiddle

来源

2013-10-03 06:36:45

感谢您的帮助，我想实现的一件事无论哪个选项卡处于活动状态，其标题颜色都应该变为橙色。请告诉我该怎么做？ – user2841408

@ user2841408看到http://jsfiddle.net/arunpjohny/sTLAZ/3/ –

谢谢你这么多：D – user2841408

使用jquery div的手风琴应该关闭

回答

相关问题