多读按钮，只打开父div。

I have a read more button on my website that once clicked, shows more of the text (or code) bellow. The problem is if I use 2 of the read more functions on same page, they will open and close each other (both will open and close no mather wich button I use. How can I make it only open the parent div?

我在我的网站上有一个阅读更多的按钮，一旦点击，显示更多的文本(或代码)贝罗。问题是，如果我在同一页面上使用了2个read more函数，它们将会打开并关闭彼此(两者都将打开并关闭我使用的mather wich按钮)。如何才能使它只打开父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);

require ajax:

需要ajax:

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

You can also see the codepen with the code already setup: http://codepen.io/Volcan3/pen/xRxBpe

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

3 个解决方案

#1

Here is a way to achieve what you want without modifying your HTML or CSS structure at all, and keeping the transition effect that you have.

这里有一种方法可以在不修改HTML或CSS结构的情况下实现您想要的，并保持您所拥有的转换效果。

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

Edit: Codepen http://codepen.io/anon/pen/wovOQq

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

#2

using .prev() to address only the sibling div

使用.prev()只处理兄弟div。

$(".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);

/* *****************************************************
/////////// 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%;
}

<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>

#3

You want to use some code like this:

你想用这样的代码:

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

#1