1

我正在显示产品列表。单击显示更多后，需要显示额外类中的文本，显示更多需要隐藏，显示更少需要可见。当点击显示更少时，需要发生相反的情况。

我使用了下面的 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

你可以结合closest,find和toggle工作。
因此，您的所有 javascript 都可以更改为以下内容。

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

演示

参考

于 2012-12-12T05:57:06.783 回答
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 回答