0

ユーザーがページにリストされている各記事/プロジェクトをクリックできるようにしたいクライアント向けの大量のドキュメントを含むページと、その下にある小さな詳細ペインを開いてコンテンツを表示するページがあります。

特に JQuery を使用すると、これがかなり簡単にできることはわかっていますが、私はこの言語に精通しておらず、この種の動的機能に挑戦しようとしています。50 以上のドキュメントがあるため、"this" を使用し、50 の要素のそれぞれを明示的に呼び出すのではなく (また、読み込み時間を遅らせる) 動的な状態を維持しようとする理由があります。

これが私のHTMLです（リストに要素を1つだけ含めました）...

    <ul class="paging" id="paging">
                <li><a href="">Economics of Ethanol and Bio-butanol as Gasoline Blendstocks<br />
                <strong>Categories:</strong> Oxygenated Fuels Issues, Bio-fuel Economics, Blendstock Valuation, Refining Economics, Refinery Modeling</a>
                <ul style="background:#f8f8f8; width:500px; height:200px;"><li>Here is the text that should appear beneath woot</li></ul>

                </li>

そして、ここに私のJQueryビットがあります...

    <script type="text/javascript">
        $(document).ready(function() {

            $('ul.paging > li > ul').hide();

            $('ul.paging > li').click(function() {

                $(this > ul).slideToggle();

            });
        });


    </script>

私の要素は正しく隠されているので、セレクターは大丈夫だと思いますか? とにかく、ロールアウトで機能する機能はありません。何かご意見は？

ありがとう、すべての助けは非常に高く評価されています! 私が言ったように、これには非常に新しいです。：） 再度、感謝します！

4

3 に答える 3

2

の値thisは DOM 要素です。のような jQuery の DOM トラバーサル メソッドのベースとして使用する必要があります.children()。

$(this).children("ul").slideToggle();
于 2013-02-18T17:23:27.450 に答える
2

$(this > ul)のように見えるはずです$('ul', this)

または

$(this).find('ul').slideToggle();
于 2013-02-18T17:23:29.267 に答える
0

ここのセレクターはおそらくあなたの問題です：

$(this > ul).slideToggle();

あなたはこれを最もよく使うかもしれません:

$(this).find('ul').slideToggle();

の CSS スタイルをulデフォルトで非表示にすることもお勧めします。これにより、ドキュメントの準備完了イベントの前に画面上で点滅する可能性がなくなります。

于 2013-02-18T17:26:16.037 に答える