我有一个元素,当用户在浏览器窗口中向下滚动时,该元素将消失。我还希望该元素在单击另一个元素时切换其可见性。
这是我所拥有的,但可见/不可见切换不起作用:
jQuery(document).ready(function() {
$(window).scroll(function() {
$(".product-down-scroll").css("opacity", 1 - $(window).scrollTop() / 250);
});
$('.pricing-tab').click(function() {
$('.product-down-scroll').toggle();
});
});
html:
<div class="pricing-accordion">
<div class="pricing-tab">
<input id="tab" type="checkbox" name="tabs">
<label for="tab">PRICING</label>
<div class="tab-content">
<p>Lorem ipsum dolor si amet</p>
</div>
</div>
</div>
如何做到这一点呢?
发布于 2018-09-13 02:47:08
代码
$('.pricing-tab').click(function(){
$('.product-down-scroll').toggle();
});
将click
事件绑定到元素<div class="pricing-tab"></div>
。由于该<div>
没有任何内容,因此它的height
为0
,无法单击。
建议使用<button>
元素切换<div class="pricing-tab"></div>
元素的Here is a fiddle。
发布于 2018-09-13 05:21:20
toggle()
不会改变元素的不透明度,它会取消/设置display: none
。您应该将不透明度设置回1,而不是使用toggle()
。
$('.pricing-tab').click(function(){
$('.product-down-scroll').css('opacity',1);
});
发布于 2018-09-15 00:03:32
这似乎起作用了:
$("label[for='tab']").click(function(){
$('.product-down-scroll').toggle();
});
但是,我如何通过指定只影响.ricing-tab选择器中的标签来获得更具体的信息呢?
https://stackoverflow.com/questions/52298908
复制相似问题