Question

我是一名设计师，从时间到硬币都涉及代码，实际上只是做一些小修改。

我有一些现有的代码可以按以下方式工作：

短暂延迟后，页面上会显示文字链接（类＆＃39;一个＆＃39;）
当您点击该链接时，隐藏的div（类＆＃39; overlayone＆＃39;）可见并向上滑动以显示内容
当您点击角落中的X（类＆＃39;关闭＆＃39;）时，它会关闭div。

我需要在页面上添加第二个链接，名为＆＃34;两个＆＃34;它以相同的方式起作用，但打开一个不同的隐藏div（称为＆＃39; overlaytwo＆＃39;）。我不知道如何将它附加到现有代码中。目前的代码是：

$(document).ready(function() {
setTimeout(function() {
    $(".one").addClass("active"), $("img").trigger("unveil")
}, 1e3), $("a.one").on("click", function() {
    $(".overlayone").addClass("active")
}), $(".close").on("click", function() {
    setTimeout(function() {
        $(".overlayone").removeClass("active")
    }, 400), setTimeout(function() {
        $(".close").removeClass("is-active")
    }, 1e3)
})
});

Answer 1

我希望我明白你的观点：|

{{1}}

Answer 2

您的HTML是：

<div class="one"  > 
     <a href="#" class="one">One</a> 
</div> 


<div class="two"> 
    <a href="#" class="two">Two</a>     
</div> 

<div class="overlayone"> 
    <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
    <div class="content"> <p>Text content...One</p> </div>
</div> 
<div class="overlaytwo"> 
     <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
     <div class="content"> <p>Text content...Two</p> </div>
</div>

你需要修改你的html一点点。找到下面的代码如果代码有变化，则会有代码注释。

＆＃13;

$(document).ready(function() {
    // Added class to link having class "two"
	setTimeout(function() {
		$(".one").addClass("active");
		$(".two").addClass("active");
		$("img").trigger("unveil")
	}, 1e3); 
	
  /*When link is clicked  custom attribute value of that link is  taken and based on that "active" class is added to overlay div*/
	$("a.links").on("click", function() {
		$('.'+$(this).data('overlay')).addClass("active")
	});

	$(".close").on("click", function() {
	    var self = this;
		setTimeout(function() {
            // "Self" is clicked close  button and active class is removed  from parent of that button 
			$(self).parent().removeClass("active")
		}, 400);
		setTimeout(function() {
			$(self).removeClass("is-active")
		}, 1e3)
	});
});

＆＃13;

.active{
	display : block !important;
}

.overlayone,
.overlaytwo{
	display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--Add one custom attribute in anchor tag . Value of that attribute will be corresponding div.Also add class "links" to anchor tag-->
<div class="one"  > 
	<a href="#" class="one links"  data-overlay="overlayone">One</a> 
</div> 

<!--Add one custom attribute in anchor tag . Value of that attribute will be corresponding  div. Also add class "links" to anchor tag-->
<div class="two"> 
	<a href="#" class="two links"  data-overlay="overlaytwo">Two</a>		
</div> 

<div class="overlayone"> 
	<button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
	<div class="content"> <p>Text content...One</p> </div>
</div>

<div class="overlaytwo"> 
    <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
	 <div class="content"> <p>Text content...Two</p> </div>
</div>

＆＃13;

Answer 3

在这个答案中，我没有触及您在其中一条评论中提供的HTML代码。我刚换了js。确保隐藏和显示元素的方式在这里没有冲突。这不是更好的解决方案，因为每次添加新链接时都必须维护js代码。我的第一个答案更好。

$(document).ready(function() {
  setTimeout(function() {
    $(".one,.two").addClass("active"),          
    $("img").trigger("unveil")
  }, 1e3),$("a.one,a.two").on("click", function(event) {
              if($(event.target).hasClass('one')){
                $(".overlayone").addClass("active");
	          }else{
			    $(".overlaytwo").addClass("active");
		      }
    }), $(".close").on("click", function(event) {
	       var self = this;	
           setTimeout(function() {	 
             $(self).parent().removeClass("active")
           }, 400), setTimeout(function() {
             $(self).removeClass("is-active")
          }, 1e3)
    })
});

.active{
  display : block !important;
}
	
.overlayone,
.overlaytwo,
a.one,
a.two{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="one"  > 
  <a href="#" class="one">One</a> 
</div> 

<div class="two"> 
  <a href="#" class="two" >Two</a>		
</div> 

<div class="overlayone"> 
  <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
  <div class="content"> <p>Text content...One</p> </div>
</div>

<div class="overlaytwo"> 
  <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
  <div class="content"> <p>Text content...Two</p> </div>
</div>

梳理两个显示两个隐藏div的类似函数

3 个答案: