.slideToggle和位置：已在Chrome中修复

Question

我正在显示和隐藏菜单内容。 单击该按钮时，将使用.slideToggle（）显示无序列表和具有固定位置的图像。 这是可行的，但是当显示多个元素然后将其隐藏时，图像将保持固定在其原始显示位置。 有没有什么办法解决这一问题？

的HTML

<div class="menuBar">
<table cellpadding="2" cellspacing="0" border="0">
    <tr>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30EntertainmentButton.png" id="entertainment"  width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceButton.png" id="choice" width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceXtraButton.png" id="choiceXtra" width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceUltimateButton.png" id="choiceUltimate" width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30PremierButton.png" id="premier" width="124" height="25" /></td>
    </tr>
</table>
</div>
<div class="packages" id="ent">
<div class="pricePoint"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV3entertainment_en.png" width="190" height="439" /></div>
    <ul id="entChan">
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/AandE_logo_4.jpg" height="56" width="70" title="A&E" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">A&amp;E</span></li>
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/ABCFamily_logo_4.jpg" height="56" width="70" title="ABC Family" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">ABCF</span></li>
    </ul>
</div>

<div class="packages" id="cho">
<div class="pricePoint"><img class="pricePoint" src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV3choice_en.png" width="190" height="439" /></div>
<ul id="choChan">
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/AandE_logo_4.jpg" height="56" width="70" title="A&E" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">A&amp;E</span></li>
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/ABCFamily_logo_4.jpg" height="56" width="70" title="ABC Family" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">ABCF</span></li>
    </ul>
</div>

的CSS

.menuBar {
    position:fixed;
    background-color:#fff;
    top:55px;
    left:0;
    z-index:11;
}
.pricePoint {
    position:fixed;
    width:190px;
    top:85px;
}

JS

$('#entertainment').click(function () {
    $("#ent").slideToggle();

});
$('#choice').click(function () {
    $("#cho").slideToggle();

});

Answer 1

现在，我在chrome中进行了尝试，我明白了您的意思。 Chrome似乎从字面上看处于固定位置。

如果您想要更多动态位置，则应使用浮点数。

尝试改用float:left 。 这应该可以解决问题。

另外，如果您在网站上打开Chrome中的开发工具，这似乎可以正确放置元素。 真奇怪