如何仅使用Javascript设置特定div块的打开和关闭?

请检查此链接https://jsfiddle.net/bhargavjoshi/sL8f6bkr/3/

我正在尝试通过单击继续阅读来打开一个块,并通过单击显示较少来关闭该块。

现在它通常可以正常工作,但是问题是当我打开例如两个块时。 1点和2点是打开的,如果单击“显示较少的1号点”,它将关闭第一个块,但也会更改显示较少的状态以继续读取块2。

所以我该如何通过单击显示较少来设置它,仅关闭特定的那个块。

jQuery(".show-slide-wrp").on("click",function(event){
    event.preventDefault();
    var slidindWrp = jQuery(this).data("slide");
    console.log(slidindWrp);
    jQuery(slidindWrp).slideDown();
    jQuery(this).hide();
});


jQuery(".hide-slide-wrp").on("click",function(event){
    event.preventDefault();
    var $this = jQuery(this);
    var closeDiv = $this.closest(".sliding-wrp");
    jQuery(".show-slide-wrp").show();
    closeDiv.slideup();
    jQuery('html,body').animate({
        scrollTop: closeDiv.offset().top - 300
    },500);

});

// scoll by id
jQuery(".contenttable a").click(function(event) {
    event.preventDefault();
    var $this = jQuery(this);
    var getScrollId = $this.attr("href");  
    console.log(getScrollId);
   jQuery('html,body').animate({
        scrollTop: jQuery(getScrollId).offset().top
    },500);
});
liyuan16888 回答:如何仅使用Javascript设置特定div块的打开和关闭?

问题在这里:

    jQuery(".hide-slide-wrp").on("click",function(event){
    event.preventDefault();
    var $this = jQuery(this);
    var closeDiv = $this.closest(".sliding-wrp");
    jQuery(".show-slide-wrp").show(); // You show all "Keep reading" occurences
    closeDiv.slideUp();
    jQuery('html,body').animate({
        scrollTop: closeDiv.offset().top - 300
    },500);

});
//you could put a data-target on theses elements :
<div class="hide-slide-wrp" data-target=".sliding7"><a>Show less</a></div>

编辑:我用笔:为了不像数据目标那样手动将属性像数据目标一样添加到html中,当用户单击时,我将数据目标添加到“显示较少”链接中在“保持阅读”链接上。然后,当我单击“显示较少”链接时,我知道要隐藏哪个“继续阅读”链接 你明白我的意思吗?

首先:当您单击“保持阅读”时,将数据目标属性添加到右结束标记:

 var $closingTag = $(this).closest(".benefixbox").find(".hide-slide-wrp");

第二:当您点击结束标签时:隐藏“继续阅读”标签:

var dataTarget = $(this).data("target");// here is my target : keep reading
    jQuery("[data-slide='"+dataTarget+"']").show(); // we show the link keep reading again because we know what its data-slide is
本文链接:https://www.f2er.com/3159327.html

大家都在问