在IE 7（jQuery）slideToggle問題

求助：我找到了答案！我從CSS .over_meno li a{}刪除position:relative，現在一切正常。在IE 7（jQuery）slideToggle問題

我使用jQuery創建了一個切換菜單，但是在IE 7文本中出去的div框和文本的裝飾顯示不好。

這是我的jQuery代碼：

$(document).ready(function() { 

    $(".boxer .header_cerve").click(function() { 
     var item = $(this).attr("title"); 
     if (item){ 
      $("#" + item + " .details").slideToggle("slow"); 
      $("#" + item + " .one_side").slideToggle("slow"); 
      } 
}); 
});

這是我的菜單HTML：

<div id="2" class="boxer"> 
<div title="2" class="header_cerve"> 
    <span class="right_corner"></span> 
    <span class="text">first menu</span> 
</div> 
<div class="details"> 
    <ul class="over_meno"> 
     <li><a href="sample.html"> <span>sample</span></a></li> 
     <li><a href="sample2.html"><span>sample2</span></a></li> 
    </ul> 
</div> 
<i style="" class="one_side"> 
    <i class="gr4"><i></i></i> 
    <i class="gr3"><i></i></i> 
    <i class="gr2"><i></i></i> 
    <i class="gr1"><i></i></i> 
</i></div>

，並有幾個拳擊手格，那些ID是區別

每一個拳擊手被一個切換菜單

有CSS，但它有些複雜！：

.boxer { 
    padding: 10px 10px 0; 
    border: 1px solid #D4D4D4; 
    border-bottom: 0px; 
    border-top: 0px; 
} 
.boxer .header { 
    background: transparent url(../image/boxser_css_or.gif) repeat-x scroll 0 0; 
    color: #FFFFFF; 
    direction: rtl; 
    font-family: "Times New Roman",Times,serif; 
    font-size: 14px; 
    font-weight: bold; 
    height: 34px; 
    line-height: 33px; 
    padding: 0 10px; 
    text-align: right; 
    border-left: 1px solid #D7D5D5; 
} 
.boxer .header_cerve { 
    background: transparent url(../image/boxser_css_or.gif) repeat-x scroll 0 0; 
    color: #FFFFFF; 
    direction: rtl; 
    font-family: "Times New Roman",Times,serif; 
    font-size: 14px; 
    font-weight: bold; 
    height: 32px; 
    line-height: 33px; 
    padding: 0px; 
    text-align: right; 
    cursor: pointer; 
} 
.boxer .header_cerve .text { 
    padding-right: 10px; 
    line-height: 30px; 
} 
.boxer .details { 
    color: #000000; 
    background: #ffffff; 
    direction: rtl; 
    padding: 7px 0px; 
    text-align: right; 
    border: 1px solid #D7D5D5; 
    border-bottom: 0px; 
} 
.boxer .icon { 
    background: url(../image/felfel.png) no-repeat; 
    width: 20px; 
    height: 21px; 
    float: left; 
    margin-top: 5px; 
} 
.boxer .details .left_corner { 
    background: url(../image/boxser_corner.gif) no-repeat 0px 0px; 
    width: 8px; 
    height: 7px; 
    float: left; 
} 
.boxer .header_cerve .right_corner { 
    background: url(../image/boxser_corner.gif) no-repeat -8px 0px; 
    width: 7px; 
    height: 7px; 
    float: right; 
} 
.boxer .header_cerve .left_corner { 
    background: url("../image/boxser_corner.gif") no-repeat scroll 0 bottom transparent; 
    width: 7px; 
    height: 32px; 
    float: left; 
} 
i.gr1, 
i.gr2, 
i.gr3, 
i.gr4 { 
    border-style: none solid; 
    border-width: 1px; 
    display: block; 
    height: 2px; 
    margin: 0 1px; 
    position: relative; 
    z-index: 30; 
} 
i.gr1 { 
    background: none repeat scroll 0 0 #D4D4D4; 
    border: 0 none; 
    height: 1px; 
    margin: 0 6px; 
} 
i.gr2, 
i.gr3, 
i.gr4 { 
    background: none repeat scroll 0 0 #ffffff; 
    border-color: #D4D4D4; 
} 
i.gr2 { 
    border-width: 2px; 
    height: 1px; 
    margin: 0 4px; 
} 
i.gr3 { 
    border-width: 2px; 
    height: 1px; 
    margin: 0 2px; 
}

來源

2011-04-07 afsane

您可以添加您的CSS嗎？ – sunn0 2011-04-07 08:55:39

我把CSS以上 – afsane 2011-04-07 10:31:27

嘿我改變jquery代碼：$（「＃」+ item +「.details」）。slideToggle（「slow」）; \t $（「＃」+ item +「.one_side」）。toggle（）;第二個問題現在得到糾正，但ie7有問題 – afsane 2011-04-07 10:43:57

我找到了答案！我刪除了位置：從css.over_meno li a {}的相對位置，現在每件事都正確

來源

2011-04-28 18:36:37 afsane

在IE 7（jQuery）slideToggle問題

回答

相關問題