1

これが深刻な問題でない限り、私はstackoverflowを求めません。この特定の問題をデバッグする方法がわかりません。左側のナビゲーションの順序付けされていないリスト要素に、インライン表示属性が挿入されています。jsコードがこれを行っているのかわかりません。

js / custom.jsにファイルがありますが、そのファイルを削除しても効果はありません。だから私はそこにあると思います。grepingを試しましたが、追跡しようとしている表示効果のul要素を.attr, .hide, .css etc etc指すものは何も表示されません。要素をエコーまたは出力し、そこにも何もないインスタンスのphpファイルをgrepしました。私はfirebugとfirequeryを使用しましたが、要素を調べた後、明らかなものは何も表示されません。Chromeツールで属性を変更するためのブレークポイントを試しました。

答えはDOMインスペクターにあると思いますが、それは私には不思議です。FirefoxとChromeツールのDOMツリービューを確認する必要があります。しかし、それまでの間、このページの表示プロパティであるクラスsubsでul要素に何が与えられているかについて誰かが私に手がかりを与えることができますか？

4

2 に答える 2

3

これはChromeで簡単に理解できます。

  1. リストを保持している親要素を見つけます。
  2. 上記の親要素を検査します。
  3. 要素を右クリックして、[サブツリーの変更を中断する]をオンにします
  4. スタックトレースを調べて、誰が要素を追加したかを調べます。
  5. 利益！

それがあなたが犯人を見つけるのを助けることを願っています。

于 2012-08-27T03:53:32.263 に答える
2

あなたはGoogleChromeDeveloperツールを試し、CSSがあなたが見ている要素を隠しているものであるかどうかを確認しましたか？

Chromeブラウザで要素をクリックし、[要素の検査]を選択して、使用可能なCSSプロパティを確認するだけです。

最終的に、私がこれにつながったのは、特定のテキストをクリックして、下のliを開くことでした。次に、要素を調べたときにテキストを検索し、そこにテキストが含まれているアンカータグを見つけました。次に、アンカーが原因であると想定し、関連するクラス名「exp」を検索して、関数を含むjsファイルを見つけました。

Crown / jsフォルダーにあるcustom.jsを調べたところ、次のことがわかりました。

$('.exp').collapsible({
        defaultOpen: 'current',
        cookieName: 'navAct',
        cssOpen: 'active',
        cssClose: 'inactive',
        speed: 200
    });

Liには、「exp」のクラスを持つアンカー要素が含まれています

<li class="forms"><a href="#" title="" class="exp"><span>Forms stuff</span><strong>4</strong></a>
            <ul class="sub" style="display: none; ">
                <li><a href="forms.html" title="">Form elements</a></li>
                <li><a href="form_validation.html" title="">Validation</a></li>
                <li><a href="form_editor.html" title="">WYSIWYG and file uploader</a></li>
                <li class="last"><a href="form_wizards.html" title="">Wizards</a></li>
            </ul>
        </li>

このタグをクリックすると、「アクティブ」と呼ばれる別のクラスが取得され、jQueryが表示コードを挿入します。

<li class="forms"><a href="#" title="" class="exp active"><span>Forms stuff</span><strong>4</strong></a>
            <ul class="sub" style="display: block; ">
                <li><a href="forms.html" title="">Form elements</a></li>
                <li><a href="form_validation.html" title="">Validation</a></li>
                <li><a href="form_editor.html" title="">WYSIWYG and file uploader</a></li>
                <li class="last"><a href="form_wizards.html" title="">Wizards</a></li>
            </ul>
        </li>

その後、CSSが残りを処理します。

于 2012-08-27T03:54:39.663 に答える