Question

我有几篇文章在点击更多或点击较少时滚动。该位置应该是文章之后的任何给定元素（例如br或div），但是我在参考这个时会遇到问题。是否可以使用父选择器和下一个选择器，或者我应该使用辅助div来滚动它们吗？

HTML：

<div id="text1">
<p>Text   <a href="javascript:void(0)" id="more">More..</a><p>
<div id="more">more text   <a href="javascript:void(0)" id="less">Less..</a></div>
</div> <br>

<div id="text2">
<p>Text <a href="javascript:void(0)" id="more2">More..</a><p>
<div id="more2">more text    <a href="javascript:void(0)" id="less2">Less..</a></div>
</div>

jQuery的：

$("#more").click(function() {
    $(this).parents("div").find("#more").slideDown("slow"); 

       $('html, body').animate({
        scrollTop: $(this).parents("div").next().offset().top
        }, 1000);
});

$("#less").click(function() {
    $(this).parents("#more").slideUp("slow");
});


    $("#more2").click(function() {
    $(this).parents("div").find("#more2").slideDown("slow");    

       $('html, body').animate({
        scrollTop: $(this).parents("div").next().offset().top
        }, 1000);
});

$("#less2").click(function() {
    $(this).parents("#more2").slideUp("slow");
});

Answer 1

'id' must be unique within the HTML document。您只需要将“更多”和“更少”更改为类，这样就可以绑定相同的事件处理程序并执行它们。

<div id="text1">
    <p>Text <a href="javascript:void(0)" class="more">More..</a>

    </p>
    <div class="more-text">more text 
        <a href="javascript:void(0)" class="less">Less..</a>
    </div>
</div>
<br>
<div id="text2">
    <p>Text <a href="javascript:void(0)" class="more">More..</a>

    </p>
    <div class="more-text">more text 
        <a href="javascript:void(0)" class="less">Less..</a>
    </div>
</div>
<br>

jQuery的：

$('.more').click(function () {
    var $more_text = $(this).parents('div').find('.more-text');

    $more_text.slideDown('slow');
    $('html, body').animate({
        scrollTop: $more_text.offset().top
    }, 'slow');
});

$('.less').click(function () {
    $(this).parent('.more-text').slideUp('slow');
});

这是jsfiddle。

parent（）next（）选择器和滚动

1 个答案: