Question

我正在尝试使用JQuery切换，因此当用户单击信息图标时，显示/隐藏包含项目信息的隐藏div。由于某种原因，它不适合我。

在尝试调试时，我注意到show（）正确显示了我要切换的目标元素。但是，当我用show()替换toggle()时，它不起作用，也不会返回任何错误。

我想知道是否有人可以帮助我找出问题的原因。

我的标记

<div class="option">    
    <div class="prod-text">Toy Whistle </div>
    <div>
        <img class="info-icon" src="Info-icon.png">
    </div>
    <div class="option-info" style="display:none;">
        <div>
            <div class="price-text">Price: $100</div>
            <div class="prod-id-text">Item Number: 231912</div>
            <div class="quantity-text">Quantity: 72</div>
        </div>
    </div>
</div>

JQuery（不起作用）

$(".info-icon").click(function(){
    $(this).parent().parent().find('.option-info').toggle();
});

JQuery（有效！）

$(".info-icon").click(function(){
    $(this).parent().parent().find('.option-info').show();
});

非常感谢提前！

Answer 1

也许click事件处理程序被绑定两次，因此每次单击都会触发两次。 show()在这种情况下可以正常工作，但toggle()会显示，然后每次单击时立即隐藏元素。试试这个：

$(".info-icon").click(function(){
    console.log('click handler fired');
    $(this).parent().parent().find('.option-info').toggle();
});

在启用Web Inspector或Firebug的情况下运行此操作，以查看每次单击记录的消息数。

切换不适用于显示的相同元素

1 个答案: