0

ちょっとわからないことに出くわしたので、試してみていただけないでしょうか。

まず、次のコードがあります。

<li class="mc002">
<ul>
    <li>
        <div class="label-container">
            <a class="btn">label 1</a>
            <a class="btn">label 2</a>
        </div>
        <div class="main-container">
            <div class="prj-title">
                <h3><a href="">New design for my website</a></h3>
                <div class="buttons">
                    <button data-role="none" class="btn smry">summary</button>
                </div>
            </div>
            <div class="summary">
            </div>
            <div class="prj-footer">
                <h6>filed under:</h6>
                <span>webdesign, webdevelopment, UX design</span>
                <h6>skills:</h6>
                <span>html5, css3, javascript, php</span>
            </div>
        </div>
    </li>

「要約」を下にスライドさせる JavaScript:

$('.main-container .smry').click(function () {
    $(this).closest(".summary").slideToggle(100);
});

これの問題は、それが機能しないことです。助けてくれませんか？

4

2 に答える 2

1

この.closest()メソッドは兄弟やいとこを見つけません。現在の要素 (あなたの場合は ) から始まり.smry、祖先を上って行き、一致が見つかったときに停止します (一致がない場合は空の jQuery オブジェクトを返します)。

代わりにこれを試してください：

$('.main-container .smry').click(function () {
    $(this).closest(".main-container").find(".summary").slideToggle(100);
});

これは、最も近い包含.main-container要素に移動し、次に を使用.find()して関連する.summary要素に戻ります。

デモ: http://jsfiddle.net/4a8JC/

コードは、ドキュメントの準備が整ったハンドラーおよび/または問題の要素の後に表示されるスクリプト ブロックにある必要があることに注意してください。

(これを理解するには、要約 div に実際のコンテンツが必要になることにも注意してください。)

于 2013-08-25T10:51:23.320 に答える