0

私のhtmlページのコンテンツは以下のとおりです

<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

詳細コンテンツは最初は折りたたまれています。ユーザーが [Read More] ボタンをクリックすると、詳細コンテンツを表示する必要があります。私はそれを可能にすることができます。詳細な div タグの id とボタンの onclick イベントの javascript を定義します。id を使用すると、div スタイルの表示が変更されます。

しかし、バックエンド データに基づくセクションのリストが複数あります。私のページは以下のようにレンダリングされます

<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 2
    </div>
    <div style="display:none">
        Details 2
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 3
    </div>
    <div style="display:none">
        Details 3
    </div>
    <button>Read More</button>
</div>

[続きを読む] ボタンがクリックされたときに展開および折りたたみ機能を実現するにはどうすればよいですか。

4

4 に答える 4

2

プレーンなJavaScriptを使用し、いくつかのクラスを戦略的に追加することで、これを行うことができます。これにより、各ボタンがトグルになり、トグルの状態に応じてテキストも変更されます。次に、1つのJavaScriptがこの構造の繰り返されるすべてのインスタンスに対応し、コードは、サマリー、詳細、およびボタンの正確なHTMLレイアウトに依存しません（同じクラスを保持し、同じコンテナーdivにある場合）。

HTML：

<div>
    <div>
        Summary 1
    </div>
    <div class="details" style="display:none">
        Details 1
    </div>
    <button class="readMore">Read More</button>
</div>

<div>
    <div>
        Summary 2
    </div>
    <div class="details" style="display:none">
        Details 2
    </div>
    <button class="readMore">Read More</button>
</div>

<div>
    <div>
        Summary 3
    </div>
    <div class="details" style="display:none">
        Details 3
    </div>
    <button class="readMore">Read More</button>
</div>​

そしてjavascript：

function toggleVis(el) {
    var vis = el.style.display != "none";
    if (vis) {
        el.style.display = "none";
    } else {
        el.style.display = "block";
    }
    return(!vis);
}

(function() {
    var readMore = document.getElementsByClassName("readMore");
    for (var i = 0; i < readMore.length; i++) {
        readMore[i].onclick = function(e) {
            var vis = toggleVis(e.target.parentNode.getElementsByClassName("details")[0]);
            e.target.innerHTML = vis ? "Read Less" : "Read More";
        }
    }
})();

作業デモ： http： //jsfiddle.net/jfriend00/aMBkJ/

注：これには、古いバージョンのIEではシムが必要になります。getElementsByClassName()</ p>

于 2012-08-08T07:23:09.713 に答える
0

jQuery .prev()を使用すると、簡単に実現できます。

$('button').on('click', function(e){
   $(this).prev('div').toggle();
});

デモ

于 2012-08-08T07:19:59.670 に答える
-1

jqueryでこれを試すことができます

<button class="readmore">Read More</button>

jQuery

$('.readmore').click(function(){
   $(this).prev().show();
});
于 2012-08-08T07:17:47.130 に答える
-1

jquery を使用してそれを行う方法は次のとおりです。

HTML コード:

<div class="stuff">
<dl id="faq">
    <dt>What shouldn't I do to the bird?</dt>
    <dd>Never try to treat a fracture at home.</dd>
</div>

JQuery コード:

jQuery(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function(){
       $(this).next().slideToggle();
   });
});
于 2012-08-08T07:18:19.700 に答える