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

【问题标题】：How to toggle an element that uses scroll (function)?如何切换使用滚动（功能）的元素？
【发布时间】：2018-09-12 15:36:32
【问题描述】：

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

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

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>

如何做到这一点？

【问题讨论】：

如果没有minimal reproducible example，我们将无法调试此问题。
我添加了一些新信息

标签： jquery

【解决方案1】：

代码

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

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

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

【讨论】：

嗨！感谢你的回复。定价标签 div 实际上不是空的。折叠手风琴时可以看到其中的内容。

【解决方案2】：

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

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

【讨论】：

试过这个。 .product-down-scroll 不受点击功能的影响。所以基本上什么都没有发生......
@mmhnyc1220 对不起，但也许我只是不明白，你想要实现什么。这是一个工作小提琴：jsfiddle.net/xpvt214o/790212
我认为问题在于代码在单击 div 的其余部分时有效，但在文本“定价”本身上无效。我认为这是因为 div 内的 'label for="tab"'
没什么大不了的，您可以简单地将点击处理程序绑定到标签而不是 .pricing-tab 本身。
如果我想更具体一些并将处理程序专门绑定到 .pricing-tab 选择器，这可能吗？

【解决方案3】：

这似乎有效：

$("label[for='tab']").click(function(){
$('.product-down-scroll').toggle();
});

但是如何通过指定只有 .pricing-tab 选择器中的标签受到影响来获得更具体的信息？

【讨论】：