1

我正在尝试使用 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();
});

提前谢谢了！

4

1 回答 1

2

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

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

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

于 2013-03-02T02:53:39.487 回答