Question

我在无序列表中有一个jquery slidedown菜单 - 虽然它适用于Firefox，但我才意识到有人告诉我他们在IE中正确显示它时出现了问题。菜单插刀在列表中插入jquery :(

这是我正在使用的代码：

<ul>
    <li><a href="Item.html">First</a></li>
    <li><a href="">Second</a></li>
    <li><a href="">Third</a></li>
    <li id="flip_1"><span>Family</span></li>
        <div id="panel_1">
            <li><a href="">Child 1</a></li>
            <li><a href="">Child 2</a></li>
            <li><a href="">Child 3</a></li>
        </div>

    <li><a href="history">History</a></li>
 </ul>

不仅此菜单中断，jquery项目在单击时会重新回到原位。

以下是幻灯片的代码：

$(document).ready(function(){
      $("#flip_1").click(function(){
      $("#panel_1").slideToggle("slow");
    }); 
 });

感谢您的帮助。

Answer 1

您的HTML无效。所以你会得到意想不到的结果。您有一个列表项，其中包含div，然后是更多列表项。列表项必须放在ol或ul标记内。先解决这个问题，让我们知道会发生什么。

 <div id="panel_1">
        <!-- These are supposed to be inside a ul or ol tag -->
        <li><a href="">Child 1</a></li>
        <li><a href="">Child 2</a></li>
        <li><a href="">Child 3</a></li>
 </div>

Answer 2

同意。一切都应该像

<ul>
   <li><a href="Item.html">First</a></li>
   <li><a href="">Second</a></li>
   <li><a href="">Third</a></li>
   <li id="flip_1"><span>Family</span></li>
   <div id="panel_1">
   <ul >

           <li><a href="">Child 1</a></li>
           <li><a href="">Child 2</a></li>
           <li><a href="">Child 3</a></li>
   </ul>
   </div>
   <li><a href="history">History</a></li>
</ul>


   <script type="text/javascript">
$(document).ready(function(){
     $("#flip_1").click(function(){
     $("#panel_1").slideToggle("slow");
   }); 
});

</script>

即使是ie6（！）也会得到它。

jQuery slidedown问题

2 个答案: