javascript - 切换不适用于显示适用的同一元素

Question

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

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

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

我的标记

<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

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

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

并在启用 Web Inspector 或 Firebug 的情况下运行它，以查看每次点击记录了多少消息。