Question

我有一个设置为在用户在浏览器窗口中向下滚动时消失的元素。我还希望该元素在单击另一个元素时切换其可见性。

这是我所拥有的，但是可见/不可见切换不起作用：

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>

如何实现？

Answer 1

代码

$('.pricing-tab').click(function(){
  $('.product-down-scroll').toggle();
});

将click事件绑定到元素<div class="pricing-tab"></div>。由于该<div>没有任何内容，因此它的height为0，因此无法单击。

Here is a fiddle，建议使用<button>元素切换<div class="pricing-tab"></div>元素。

Answer 2

toggle()不会更改元素的不透明度，它会取消设置display: none。而不是使用toggle()，您应该将不透明度设置回1。

$('.pricing-tab').click(function(){
  $('.product-down-scroll').css('opacity',1);
});

如何切换使用滚动（功能）的元素？

2 个答案: