Question

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

我的问题是为什么此代码无法在IE中运行，在Chrome中运行良好。我阅读了与此类似的其他主题，但答案是用if .show .hide替换切换。这不是我想要做的，我想使用切换，我似乎不明白为什么IE不喜欢它。这有点像菜单，它是公司提供的服务列表，切换是一个div，其中包含有关服务的详细信息。我知道div标签在li标签中是可以的，所以不应该这样，我使用div的原因是因为我使用了很多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>

SCRIPT

$(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();
  });
});

Answer 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文字，查看向上/向下滑动功能。

jQuery .toggle函数在IE9中不起作用

1 个答案: