0

上のリンクをクリックした後、非表示の div を .slideDown()/.slideUp() に取得しようとしています。div には表示プロパティ 'hidden' があります。IE9 を除くすべてのブラウザで問題なく動作します。IE9 でリンクをクリックしても何も起こらず、非表示の div が表示されません。しかし、divの表示プロパティを「可視」に設定すると、非常にうまく切り替わります。.show()/.hide() と .toggle() を試しましたが、同じ結果が得られました。これを修正する方法はありますか？

ここに私のHTMLコードがあります

<span class="toggle">
<li id="toggler">
    <a id="atoggler1" href="#">
        '.$info['category'].'
    </a></li></span>
<div class="hiddenDiv">
<p>
    $info['description']
</p>
.....
.....
 </div>

ここに私のCSSコードがあります

.hiddenDiv{
    display: none;
 }

これが私のJavaScriptです

$(document).ready(function() {

$(".toggle").click(function () {

    // check the visibility of the next element in the DOM
    if ($(this).next().is(":hidden")) {
        $(this).next().slideDown("fast"); // slide it down
        return false;
    } else {
        $(this).next().slideUp("fast"); // hide it
        return false;
      }
  });
});

また、記録のために、私の HTML コードは php コードにラップされています。わかりやすくするために、それを含めませんでした。

この問題はどのように修正できますか? または、私の代替手段は何ですか??

4

3 に答える 3

0

$(this).next()から

<span class="toggle">

は

<li id="toggler">

あなたが見せようとしているものではなく、

<div class="hiddenDiv">

マークアップによると。使用する場合

$('#toggler').find('.hiddenDiv')

代わりに、それで問題が解決するはずです

于 2012-06-13T19:37:28.320 に答える
0

HTML で不足している終了 div を修正し、正しい div をターゲットにするようにコードを変更した後、これは IE9 でうまく機能しています。

$(document).ready(function() {

    $(".toggle").click(function () {
        $(this).closest(".toggle").next().slideToggle("fast");
        return(false);
    });

});​

実際のデモ: http://jsfiddle.net/jfriend00/d3TX9/

  1. あなたの質問のHTMLには</div>、hiddenDivの閉鎖がありませんでした
  2. クリックがどこで発生しても、オブジェクト.next()から行うようにしました。.toggle
  3. slideToggle()シンプルにするために切り替えました。
于 2012-06-13T19:47:18.187 に答える
0

CSS ファイルへのリンク タグが HTML タグ内にあると、何らかの理由で機能しませんでした。でも、外に置いておくとスタイリングが台無しになってしまいます。多くの調査を行った結果、jQuery または IE9 のいずれかにバグがあることがわかりました。コンソールを実行したときに、リンクをクリックすると無効な呼び出しエラーが発生しました。このエラーは、私の jQuery コードのこの特定の行にありました。呼び出しはありましthis.appendChild( elem );たが、それを修正するには、変更する必要がthis.parentNodeappendChild( elem );あり、修正されました。

したがって、将来、他の誰かがこの問題を抱えている場合に備えて、修正方法は次のとおりです。

  1. jQuery のバージョンに応じて、コンソールを実行してエラーのある行を確認します
  2. その行に移動し、に変更this.appendChild( elem );しますthis.parentNode.appendChild( elem );
于 2012-06-14T16:00:37.537 に答える