1

製品のリストを表示しています。[もっと見る]をクリックすると、extrasクラス内のテキストを表示する必要があり、[もっと見る]を非表示にし、[表示する]を少なくする必要があります。[表示を減らす]をクリックすると、逆のことが発生する必要があります。

以下のjQueryコードを使用しましたが、機能しますが、問題は、すべてのブロックに余分なテキストを追加することを表示/非表示にすることです。関連するブロックのみを表示したい。

Javascript

$(document).ready(function() {

    $('.extras').css("display", "none");

    $('.showmore').click(function() {
        $(".extras").toggle();
        $('.showmore').hide();
        $('.less').show();
    });

    $('.less').click(function() {
        $(".extras").toggle();
        $('.extras').hide();
        $('.showmore').show()
    });

});

HTML

<div class="blocks">
    <div class="right">
        <ul class="options">
            <li class="x"><a href="#">Service 1</a></li>
            <li class="y"><a href="#">Service 2</a></li>
            <li class="z"><a href="#">Service 3</a></li>
            <li class="r"><a href="#">Service 4</a></li>
            <li class="k"><a href="#">Service 5</a></li>
        </ul>
        <div class="showmore"><a>+ show more</a></div>
    </div>
    <div class="extras">
        <p>test text</p>
        <div class="less"><a>- hide</a></div>
    </div>
</div>

<div class="blocks">
    <div class="right">
        <ul class="options">
            <li class="x"><a href="#">Service 1</a></li>
            <li class="y"><a href="#">Service 2</a></li>
            <li class="z"><a href="#">Service 3</a></li>
            <li class="r"><a href="#">Service 4</a></li>
            <li class="k"><a href="#">Service 5</a></li>
        </ul>
        <div class="showmore"><a>+ show more</a></div>
    </div>
    <div class="extras">
        <p>test text</p>
        <div class="less"><a>- hide</a></div>
    </div>
</div>

<div class="blocks">
    <div class="right">
        <ul class="options">
            <li class="x"><a href="#">Service 1</a></li>
            <li class="y"><a href="#">Service 2</a></li>
            <li class="z"><a href="#">Service 3</a></li>
            <li class="r"><a href="#">Service 4</a></li>
            <li class="k"><a href="#">Service 5</a></li>
        </ul>
        <div class="showmore"><a>+ show more</a></div>
    </div>
    <div class="extras">
        <p>test text</p>
        <div class="less"><a>- hide</a></div>
    </div>
</div>

どんな助けでもありがたいです。

4

5 に答える 5

2

関連するセクションでロジックを実行するようにしてください。こちらのデモ

試す：

        $(document).ready(function () {

            $('.extras').css("display","none");

            $('.showmore').click(function () {
                var parent = $(this).closest('.blocks');
                $(parent).find(".extras").toggle();
                $(parent).find('.less').show();
                $(this).hide();
            });

            $('.less').click(function () {
                var parent = $(this).closest('.blocks');
                $(parent).find(".extras").toggle();                 
                $(parent).find('.showmore').show();
                $(this).hide();
            });

        });
于 2012-12-12T05:47:56.557 に答える
1

使用する.closest()

$(document).ready(function() {

    $('.extras').css("display", "none");

    $('.showmore').click(function() {
        var $div = $(this).closest('.blocks');
        $div.find(".extras").toggle();
        $div.find('.showmore').hide();
        $div.find('.less').show();
    });

    $('.less').click(function() {
        var $div = $(this).closest('.blocks');
        $div.find(".extras").toggle();
        $div.find(".extras").hide();
        $div.find('.showmore').show();
    });

});​

フィドルをチェック

于 2012-12-12T05:43:16.507 に答える
0

$(this).toggle()イベントハンドラーで使用してみてください。

または、もっと完全に推測すると、$（'。extras'）。hide（）; $（this）.show（）;

于 2012-12-12T05:43:22.397 に答える
0

を使用し$(this)て、関連するコンテンツを取得します。

だから、の中で$(".showmore").click()、

$(this).parents(".blocks").children(".extras").toggle();
$(this).parents(".blocks").children('.showmore').hide();
$(this).parents(".blocks").children('.less').show();

テストリンク

于 2012-12-12T05:45:01.360 に答える
0

を組み合わせて、作業することができclosestます。 したがって、すべてのJavaScriptを次のように変更できます。findtoggle

$('.showmore, .less').click(function() {
    var $elements = $(this).closest('.blocks').find('.extras, .showmore');
    $elements.toggle();
});

デモ

参考文献

于 2012-12-12T05:57:06.783 に答える