0

第一次在这里问问题，但我之前在网站上找到了很多次答案。

我的问题是为什么这段代码不能在 IE 中运行，但在 Chrome 中运行良好。我阅读了与此类似的另一个主题，但答案是用 if .show .hide 替换切换。那不是我想做的，我想使用切换，我似乎不明白为什么 IE 不喜欢它。这有点像一个菜单和一个公司提供的服务列表，而切换是一个包含服务细节的 div。我知道 div 标签在 li 标签中是可以的，所以不应该这样，我使用 divs 的原因是因为我使用了很多 CSS 来设置它的样式，尽管它可以以更智能和更清洁的方式完成.. .我知道有与此非常相似的问题，但我找不到为什么我的代码在 IE9 中不起作用的答案。如果有人帮助我，我将不胜感激，谢谢！:)

HTML

  <div id="text">
        <ul id="serv">

           <li><div class="head"><a href="#">SERVICE1</a></div>
           <li><div class="cont">
           <p>CONTENTS <p>
               </div></li>
        </ul>
        </li>

              <li><div class="head"><a href="#">SERVICE2/a></div>
              <ul>
             <li><div class="cont">
         <p>CONTENTS2</p>       
        </div></li>
        </ul>
        </li>


    </div>

脚本

$(document).ready(function(){
$( '#serv > li > ul' )
    .hide()
    .click(function( e ){
        e.stopPropagation();
    });

  $('#serv > li').toggle(function(){
      $(this)
      .find('ul').slideDown();


  }, function(){
    $( this )
      .find('ul').slideUp();
  });
});
4

1 回答 1

1

完全解释你的标记，这是混乱和无效的：

<div id="text">
    <ul id="serv">        
        <li><div class="head"><a href="#">SERVICE 1</a></div></li>
        <li>
            <div class="cont"><p>CONTENTS </p></div>
            <ul><li>sub list</li></ul>
        </li>
        <li><div class="head"><a href="#">SERVICE 2</a></div></li>
        <li>
            <div class="cont"><p>CONTENTS 2</p></div>
            <ul><li>sub list</li></ul>
        </li>
    </ul>
</div>

$(document).ready(function(){
    $('#serv > li > ul')
        .hide()
        .click(function(e){
            e.stopPropagation();
        });

    $('#serv > li').toggle(function(){
        $(this).find('ul').slideDown();
    }, function(){
        $(this).find('ul').slideUp();
    });
});

http://jsfiddle.net/userdude/tCFCJ/5

单击CONTENTS文本以查看向上/向下滑动功能。

于 2012-08-19T22:10:21.053 回答