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

Question

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

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

现在它通常工作正常，但问题是当我为例如打开两个 block 时。 1 点和 2 点是打开的，如果我点击 show less of point no 1 那么它将关闭第一个 block ，但也会更改 show less 的状态以继续读取 block 2。

那么我如何通过点击显示更少来设置它只会关闭特定的那个 block 。

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 添加属性，因为您的页面看起来像静态 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