如何仅使用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);
});
菲尔·马哥

问题在这里:

    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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章