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

Question

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

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

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

那么如何通过单击 show less 来设置它，它只会关闭特定的那个块。

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);
});

Answer 1

问题在这里：

    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，因为您的页面看起来像 static html，当用户单击目标时，我将链接数据添加到“显示更少”继续阅读”链接。 那么当我点击“少显示”链接时，我知道要隐藏哪个“继续阅读”链接，你明白我的意思吗？

第一：当您点击“保持阅读”时，将 data-target 属性添加到右结束标记：

 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