0

ここで初めて質問しますが、これまで何度もウェブサイトで答えを見つけました。

私の質問は、なぜこのコードが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>

脚本

$(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 に答える