Question

我用css在jquery中创建了一个手风琴效果。我的代码如下：

$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(e){

    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    e.stopPropagation();
    return false; //Prevent the browser jump to the link anchor
});

以下是我的HTML代码：

<h2 class="acc_trigger">
    <div class="i_left"></div>
    <div class="i_mid"> <a href="#">General Information</a></div>
    <div class="i_right"></div>
</h2>
<div class="acc_container">
    //some stuff
</div>

<h2 class="acc_trigger"> 
    <div class="i_left"></div>
   <div class="i_mid"> <a href="#">Subset Criterion</a>  </div>
     <div class="i_right"></div>
</h2>
<div class="acc_container">
    //some stuff
</div>

以下是我的css代码：

h2.acc_trigger
     {
    color:#0000000;
    text-decoration:none;
    padding: 0; 
    height:30px;    
    line-height: 0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    float:left;
    margin-top:0px;
    width:100%;
    margin-bottom:0px;
    }
h2.acc_trigger a
 {  color:#000000;
    text-decoration:none;
    position:relative;
    top:12px;
   padding:5px 5px 5px 20px;
  background:url(../images/arrow_up.png) no-repeat scroll 0 6px transparent;

    }
h2.acc_trigger a:hover 
{
    color: #000;
}
h2.acc_trigger.active
{
 background:none;   
 text-decoration:none;
  margin:0px 0 5px 0px

}

h2.acc_trigger.active a
  {
    padding-left:20px;
    position:relative;
    top:12px;
    background:url(../images/arrow_down.png) no-repeat scroll -1px 10px transparent;
    color:#000000;
    text-decoration:none;
 }
.acc_container 
{
     margin: 0px 0px 8px 5px;
     padding: 0;
     overflow: hidden;
     width: 91%;
     clear: both;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px; 
}
.acc_container  table td{
    font-size:11px;
}
.acc_container .block 
{
    padding: 20px;
}
.acc_container .block p
 {
    padding: 5px 0;
    margin: 5px 0;
}
.acc_container h3
 {
    font: 2.5em normal Georgia, "Times New Roman", Times, serif;
    margin: 0 0 10px;
    padding: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
}
.acc_container img 
{
    float: left;
    margin: 10px 15px 15px 0;
    padding: 5px;
    background: #ddd;
    border: 1px solid #ccc;
}

它在mozilla firefox中运行得非常好，但在其他浏览器（IE）中，accrdion会带来冒泡效果，并且有些重叠。请帮忙。

Answer 1

有类似的问题，修好后：

$("#accordion").accordion({ autoHeight: false,
                                        animated : false
});

Jquery手风琴在Internet Explorer中无法正常工作

1 个答案: