Question

我的网站上有一个阅读更多按钮，一旦点击，就会显示更多文字（或代码）。问题是如果我在同一页面上使用2个读取更多功能，它们将相互打开和关闭（两者都将打开和关闭我使用的按钮。我怎样才能使它只打开父div？

HTML：

<h1>Read more using CSS and JS</h1>

<p class="p">This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

<p class="p">This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

<div class="hidden">

<p class="p">This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

<p class="p">This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

<p class="p">This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

<p class="p">This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

</div>

<div class="more-after">
  <a class="more">Show More...</a>
  <a class="more" style="display:none">Show Less</a>
</div>

<!--<p class="debug"></p>-->

CSS：

/* *****************************************************
/////////// Read More //////////////////////////////////
***************************************************** */
.wrap {
    width: 100%;
    margin:0 auto;
}

.hidden {
    display: none;
}

.more {
    font-size:13px;
    letter-spacing: 2px;
    cursor: pointer;
    color:#e3382d;
}

.more-after {
    border-bottom:1px solid #080e11;
    width:100%;
}

JS：

$(".more").click(function() {

  $(".hidden").slideToggle("slow",function(){
    $(".more").toggle();
  });

});


var content = $(".wrap").text();
var length = content.length;
$(".debug").text(length);

需要ajax：

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

您还可以使用已设置的代码查看codepen： http://codepen.io/Volcan3/pen/xRxBpe

Answer 1

使用.prev()仅解决同级div

＆＃13;

$(".more-after").click(function() {
  var target = $(this);
  target.prev().slideToggle("slow",function(){
    $('.more', target).toggle();
  });

});


var content = $(".wrap").text();
var length = content.length;
$(".debug").text(length);

＆＃13;

/* *****************************************************
/////////// Read More //////////////////////////////////
***************************************************** */
.wrap {
    width: 100%;
    margin:0 auto;
}

.hidden {
    display: none;
}

.more {
    font-size:13px;
    letter-spacing: 2px;
    cursor: pointer;
    color:#e3382d;
}

.more-after {
    border-bottom:1px solid #080e11;
    width:100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h1>Read more using CSS and JS</h1>

<p>This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec nisl ac nibh tristique consectetur a at lacus. Vestibulum tempus, urna id vehicula mollis, elit lectus pharetra nisl, quis facilisis neque justo sit amet nisl. Vivamus egestas leo quis maximus aliquam. Phasellus ligula tellus, imperdiet vitae aliquet vel, consequat eget turpis. Aliquam elit justo, vestibulum id risus ac, commodo tristique eros. Nunc risus eros, facilisis nec ultrices ac, volutpat et est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet enim nisl, eget elementum lectus lobortis non. Nunc ac viverra arcu, vulputate aliquam eros. Aliquam tellus lorem, luctus ullamcorper mauris a, lacinia semper urna. Duis rhoncus nunc non sollicitudin dignissim. Donec interdum, libero in posuere vestibulum, sem erat maximus mauris, id laoreet urna dolor vel nunc. Nullam euismod eu mi a posuere. Vestibulum augue lacus, aliquam a pharetra eget, dictum sed eros. Morbi porta tincidunt purus, sit amet pellentesque ex dapibus vitae. Aliquam id ullamcorper felis.</p>

<div class="hidden">

<p>Nullam condimentum, nisl sed laoreet venenatis, mi massa scelerisque lacus, a maximus sapien felis vitae mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ac consectetur sapien. Suspendisse lacus leo, scelerisque nec semper et, ornare id nulla. Duis eu pellentesque lectus. Duis sed risus mi. Maecenas nec eleifend sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin maximus velit ex, et dapibus diam laoreet sit amet. Fusce porta eget nisl vel consequat. Donec aliquam cursus ultricies.</p>

<p>Maecenas sollicitudin, libero ac ultricies mattis, nisi nisl aliquam nunc, vitae molestie augue ligula ut tortor. Donec at nibh ut nulla tempus commodo at quis nisl. Pellentesque commodo neque odio, ut finibus erat consequat quis. Nunc vel tincidunt est. Sed at maximus sem. Maecenas facilisis enim dolor, a varius ante faucibus et. Etiam porttitor massa est, sed elementum urna mattis sed. Pellentesque congue tincidunt est vel rhoncus. Quisque id tellus ut massa dapibus aliquam. Aliquam id elit in justo faucibus blandit.</p>

</div>

<div class="more-after">
  <a class="more">Show More...</a>
  <a class="more" style="display:none">Show Less</a>
</div>


<h1>Read more using CSS and JS</h1>

<p>This text is long, realy realy realy loooooooong!<br />
It is so long we even have a read more button and this text is to test the read more function. Cheers!</p>

<p>Quisque at maximus velit. Maecenas hendrerit finibus lorem. Quisque in dolor risus. Aenean et tortor pellentesque ipsum elementum finibus. Fusce vel vulputate urna. Sed tristique, nulla vitae mollis tristique, ante ex congue leo, sodales volutpat ligula nibh euismod nisi. Nunc mollis eleifend ex, in eleifend tellus eleifend eget. Donec ut luctus tellus. Curabitur auctor sodales felis, vitae dapibus nunc ornare et. Etiam tincidunt eleifend lectus, et bibendum libero imperdiet et. Quisque luctus mi quis nisl congue fermentum.</p>

<div class="hidden">

<p>Duis vulputate magna nibh. Nam quis sollicitudin dolor. Curabitur ligula libero, tempus a quam nec, pellentesque bibendum ipsum. Sed lacus est, vehicula ut rhoncus vitae, pellentesque ut odio. Aenean nec sapien eget enim congue placerat. Morbi nec purus nec nulla sodales tincidunt maximus a leo. In viverra posuere sem et placerat. Mauris ultricies ante at tortor viverra tempor. Pellentesque pellentesque, urna in euismod fermentum, nulla arcu facilisis mauris, eu lobortis diam nulla vitae lectus.</p>
</div>

<div class="more-after">
  <a class="more">Show More...</a>
  <a class="more" style="display:none">Show Less</a>
</div>

＆＃13;

Answer 2

这是一种在不修改HTML或CSS结构的情况下实现您想要的方法，并保持您拥有的过渡效果。

$(".more").click(function() {
  var $more = $(this);
  $more.parents('.wrap').find('.hidden').slideToggle('slow', function() {
    $more.parent('.more-after').find('.more').toggle();
  });
});

编辑：Codepen http://codepen.io/anon/pen/wovOQq

Answer 3

你想使用这样的代码：

$('.readmore-open').click(function(){
    $(this).closest('p').next('.readmore-box').toggleClass('active');
});

阅读更多按钮只打开父div

3 个答案: