Question

我在Jquery中创建了一个Read More / Less Toggle。现在我需要一些帮助，我是Jquery的初学者并且不了解所有功能。

HTML：

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="toggle">
<div class="more" style="display:none">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
</div>
<div class="less">
<a class="button-read-more button-read" href="#read">Mehr lesen</a>
<a class="button-read-less button-read" href="#read">Weniger anzeigen</a>
</div>
</div>

JS：

jQuery(document).ready(function() {
$(".more").hide();
jQuery('.button-read-more').click(function(){
     jQuery('.less').toggleClass('active');
     $(".more").slideDown("1000");
});
jQuery('.button-read-less').click(function(){
     jQuery('.less').removeClass('active');
     $(".more").slideUp("1000");
});
});

CSS：

.less.active .button-read-more {
display: none;
}

.button-read-less{
display: none;
}

.less.active .button-read-less{
display: block;
}

.more{
margin-top: 10px;
}

.more p{
margin: 0;
padding: 0;
}

现在我的目标是拥有多个Toggles但具有相同的类。

有什么建议吗？谢谢Chris

Answer 1

你需要使用像

这样的相对元素

jQuery(function ($) {
    $(".more").hide();
    $('.button-read-more').click(function () {
        $(this).closest('.less').addClass('active');
        $(this).closest(".less").prev().stop(true).slideDown("1000");
    });
    $('.button-read-less').click(function () {
        $(this).closest('.less').removeClass('active');
        $(this).closest(".less").prev().stop(true).slideUp("1000");
    });
});

演示：Fiddle

Answer 2

更新您的代码 - 它将正确切换。

jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function(){
        jQuery('.less').toggleClass('active');
        $(this).slideDown("1000");
    });
    jQuery('.button-read-less').click(function(){
        jQuery('.less').removeClass('active');
        $(this).slideUp("1000");
    });
});

Answer 3

您可以使用closest和find获取当前段落并相应地展开。

代码：

jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function(){
         var $par=$(this).closest('.toggle')
         $par.find('.less').toggleClass('active');
         $par.find(".more").slideDown("1000");
    });
    jQuery('.button-read-less').click(function(){
         var $par=$(this).closest('.toggle')
         $par.find('.less').removeClass('active');
         $par.find(".more").slideUp("1000");
    });
  });

演示：http://jsfiddle.net/gZz9x/

Answer 4

使用.closest()方法仅在当前上下文中工作。将代码更新为

jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function(){
        var toggle = $(this).closest('.toggle');
        toggle.find('.less').toggleClass('active');
        toggle.find('.more').slideDown("1000");
    });
    jQuery('.button-read-less').click(function(){
        var toggle = $(this).closest('.toggle');
        toggle.find('.less').removeClass('active');
        toggle.find('.more').slideUp("1000");
    });
});

Jquery SlideToggle具有相同类的多个Div

4 个答案: