Javascript 多点单击jQuery

我试图在包含多个HTML元素上的同一类的页面上显示/隐藏内容。但是，当我单击其中一个锚链接时，它会同时打开两个段落，而不仅仅是我试图打开的段落。我如何解决这个问题，使“只读更多”切换到预期的段落

JS:

HTML:

---

在回调函数中，您使用的是一个类

show more snippet

，这两个段落元素都使用它。这就是它们都受到影响的原因。

您只需使用

$（this.prev（）

）更改所有

$（'.show more snippet'）

。这将使您能够访问按钮单击前的

p

。

鉴于您的HTML结构，您需要在jQuery中使用

.parent（）.find（）

。这将针对单击的同级元素，而不是具有

类的所有元素。显示更多代码片段

例如

及

等等

编辑：更好的方法是使用
兄弟姐妹（）
如下：

例如

及

等等。
尝试使用以下方法：

为此，您必须使用
prev
。请参阅下面的代码装运

Jquery

$(document).ready(function(){
    $('.show-more').click(function(e) {
    e.preventDefault();
    if($(this).prev('.show-more-snippet').css('height') != '96px'){
        $(this).prev('.show-more-snippet').stop().animate({height: '96px'}, 200);
        $(this).text('Read more');
    }else{
        $(this).prev('.show-more-snippet').css({height:'100%'});
        var xx = $(this).prev('.show-more-snippet').height();
        $(this).prev('.show-more-snippet').css({height:'96px'});
        $(this).prev('.show-more-snippet').stop().animate({height: xx}, 400);
        $(this).text('Read less');
    }   
    });
});

HTML

<div>
    <p class="show-more-snippet"> Some first paragraph text</p>
    <a class="show-more" href="#">Read more</a> 
</div>
<div>
    <p class="show-more-snippet"> Some second paragraph text</p>
    <a class="show-more" href="#">Read more</a> 
</div>


一些第一段文本
一些第二段文本
只需选择特定的上一个div

$('.show-more').click(function(e) {
 e.preventDefault();
if($(this).prev('.show-more-snippet').css('height') != '96px'){
    $(this).prev('.show-more-snippet').stop().animate({height: '96px'}, 200);
    $(this).text('Read more');
}else{
    $(this).prev('.show-more-snippet').css({height:'100%'});
    var xx = $('.show-more-snippet').height();
    $(this).prev('.show-more-snippet').css({height:'96px'});
    $(this).prev('.show-more-snippet').stop().animate({height: xx}, 400);
    $(this).text('Read less');
}   });   

问题在于，您没有指定要使用的
中的哪一个。这应该是您单击“show more”按钮的那个

您可以使用单击侦听器中的
e
值来解决此问题。参见下面的
var段落
，该段落获得了适当的
元素，您可以使用该元素完成所需操作

只需将代码中的
$（'.show more snippet'）
替换为
$（段落）

解决方案：

$('.show-more').click(function (e) {
    e.preventDefault();

    // get the correct paragraph
    var paragraph = e.target.parentNode.querySelector('.show-more-snippet');

    if ($(paragraph).css('height') != '96px') {
        $(paragraph).stop().animate({height: '96px'}, 200);
        // ... etc ...
    }
});   

在您单击的锚点的div父级上添加活动类，其他div删除活动类。这样可以简化代码

编码

$('.show-more').click(function(e) {
  e.preventDefault();
  $('.show-more-snippet.active').removeClass('active');
  $(this).closest('.show-more-snippet').addClass('active');
});

在css中

.show-more-snippet.active {
    height:96px;
    overflow:hidden;
}

以上问题的答案太多了，但如果您希望使用一些外部js获得干净的解决方案，则可以使用expander。

主要资料来源：


$（文档）.ready（函数（）{
$（'div.show-more-snippet'）.expander({
slicePoint:280，//将内容分为两部分的字符数。
寡妇：2，
expandSpeed:0，//这是以秒为单位显示和隐藏内容的时间。
userCollapseText:'读取较少（-）//指定所需的单词默认值较少。
});
$（'div.show-more-snippet'）.expander（）；
});  

Lorem ipsum dolor sit amet，是一位杰出的献身者。在佩伦茨克的pulvinar mi。在这一天。万岁。在奥古斯都，利奥的设施是洛博蒂斯。我坐在那里。多涅克·塞德·坦普斯·维利特。前总督

Lorem ipsum dolor sit amet，是一位杰出的献身者。在佩伦茨克的pulvinar mi。在这一天。万岁。在奥古斯都，利奥的设施是洛博蒂斯。我坐在那里。多涅克·塞德·坦普斯·维利特。前总督

Lorem ipsum dolor sit amet，是一位杰出的献身者。在佩伦茨克的pulvinar mi。在这一天。万岁。在奥古斯都，利奥的设施是洛博蒂斯。我坐在那里。多涅克·塞德·坦普斯·维利特。前总督

Lorem ipsum dolor sit amet，是一位杰出的献身者。在佩伦茨克的pulvinar mi。在这一天。万岁。在奥古斯都，利奥的设施是洛博蒂斯。我坐在那里。多涅克·塞德·坦普斯·维利特。前总督

Lorem ipsum dolor sit amet，是一位杰出的献身者。在佩伦茨克的pulvinar mi。在这一天。万岁。在奥古斯都，利奥的设施是洛博蒂斯。我坐在那里。多涅克·塞德·坦普斯·维利特。前总督

Lorem ipsum dolor sit amet，是一位杰出的献身者。在佩伦茨克的pulvinar mi。在这一天。万岁。在奥古斯都，利奥的设施是洛博蒂斯。我坐在那里。多涅克·塞德·坦普斯·维利特。前总督


$(this).siblings('.show-more-snippet').stop().animate({height: '96px'}, 200);

 $('.show-more').click(function(e) {
    e.preventDefault();
  //write closing logic to close all  if you want to close other tab on class name
    $('.show-more-snippet').css({height:'100%'});

   //Then open this tab . 

  if($(this).css('height') != '96px'){
$(this).stop().animate({height: '96px'}, 200);
$(this).text('Read more');
}else{
$(this).css({height:'100%'});
var xx = $(this).height();
$(this).css({height:'96px'});
$(this).stop().animate({height: xx}, 400);
$(this).text('Read less');
   }   });   }); 

$('.show-more').click(function(e) {
    e.preventDefault();
    if($(this).siblings('.show-more-snippet').css('height') != '96px'){
        $(this).siblings('.show-more-snippet').stop().animate({height: '96px'}, 200);
        $(this).text('Read more');
    }else{
        $(this).siblings('.show-more-snippet').css({height:'100%'});
        var xx = $(this).siblings('.show-more-snippet').height();
        $(this).siblings('.show-more-snippet').css({height:'96px'});
        $(this).siblings('.show-more-snippet').stop().animate({height: xx}, 400);
        $(this).text('Read less');
    }   
});

$(document).ready(function(){
    $('.show-more').click(function(e) {
    e.preventDefault();
    if($(this).prev('.show-more-snippet').css('height') != '96px'){
        $(this).prev('.show-more-snippet').stop().animate({height: '96px'}, 200);
        $(this).text('Read more');
    }else{
        $(this).prev('.show-more-snippet').css({height:'100%'});
        var xx = $(this).prev('.show-more-snippet').height();
        $(this).prev('.show-more-snippet').css({height:'96px'});
        $(this).prev('.show-more-snippet').stop().animate({height: xx}, 400);
        $(this).text('Read less');
    }   
    });
});

<div>
    <p class="show-more-snippet"> Some first paragraph text</p>
    <a class="show-more" href="#">Read more</a> 
</div>
<div>
    <p class="show-more-snippet"> Some second paragraph text</p>
    <a class="show-more" href="#">Read more</a> 
</div>

$('.show-more').click(function(e) {
 e.preventDefault();
if($(this).prev('.show-more-snippet').css('height') != '96px'){
    $(this).prev('.show-more-snippet').stop().animate({height: '96px'}, 200);
    $(this).text('Read more');
}else{
    $(this).prev('.show-more-snippet').css({height:'100%'});
    var xx = $('.show-more-snippet').height();
    $(this).prev('.show-more-snippet').css({height:'96px'});
    $(this).prev('.show-more-snippet').stop().animate({height: xx}, 400);
    $(this).text('Read less');
}   });   

$('.show-more').click(function (e) {
    e.preventDefault();

    // get the correct paragraph
    var paragraph = e.target.parentNode.querySelector('.show-more-snippet');

    if ($(paragraph).css('height') != '96px') {
        $(paragraph).stop().animate({height: '96px'}, 200);
        // ... etc ...
    }
});   

$('.show-more').click(function(e) {
  e.preventDefault();
  $('.show-more-snippet.active').removeClass('active');
  $(this).closest('.show-more-snippet').addClass('active');
});

.show-more-snippet.active {
    height:96px;
    overflow:hidden;
}