jQuery toggle() 在 Firefox 上工作正常，但在 Chrome 中出现奇怪的现象

Question

我在表单中创建了一个“更多”链接，它在 Firefox 和 IE9 上运行良好，但在 Chrome 上表现奇怪。它显示#advanced_search只需点击 5 次即可! (见下图)。我该如何修复它或确定错误在哪里？

这是我的 HTML:

<form id="jp_search" enctype="application/x-www-form-urlencoded" action="" method="post">
    <dl class="zend_form">
        <input type="text" name="keyword" id="keyword" value="" class="txtinput" onfocus="if(this.value=='Keyword') this.value='';" onblur="if(this.value=='') this.value=('Keyword');">
        <select name="category" id="category" class="jp_select">
            <option value="0" label="-- choose a category --">-- choose a category --</option>
            <option value="5" label="Accounts payable/ Receivable">Accounts payable/ Receivable</option>
            <option value="6" label="Actuarial analysis">Actuarial analysis</option>
            <option value="8" label="Interior Design">Interior Design</option>
            <option value="9" label="Computer Animation">Computer Animation</option>
            <option value="10" label="Mobile flash">Mobile flash</option>
            <option value="11" label="Engineering">Engineering</option>
        </select>
        <input type="text" name="location" id="location" value="" onfocus="if(this.value=='Location') this.value='';" onblur="if(this.value=='') this.value=('Location');">
        <input type="submit" name="submit" id="jp_submit" value="">

        <div class="advanced_search" id="advanced_search" style="display: block; ">
            <div class="group_combo" id="group_combo">
                <select name="job_level" id="job_level" class="jp_select">
                    <option value="0" label="-- choose a level --">-- choose a level --</option>
                    <option value="1" label="New Grad/Entry Level/Internship">New Grad/Entry Level/Internship</option>
                    <option value="2" label="Experienced (Non-Manager)">Experienced (Non-Manager)</option>
                    <option value="3" label="Team Leader/Supervisor">Team Leader/Supervisor</option>
                    <option value="4" label="Manager">Manager</option>
                    <option value="5" label="Director">Director</option>
                    <option value="6" label="CEO">CEO</option>
                    <option value="7" label="Vice President">Vice President</option>
                    <option value="8" label="President">President</option>
                </select>
                <select name="contract_type" id="contract_type" class="jp_select">
                    <option value="0" label="-- choose a type --">-- choose a type --</option>
                    <option value="1" label="Full-Time Permanent">Full-Time Permanent</option>
                    <option value="2" label="Full-Time Temporary">Full-Time Temporary</option>
                    <option value="3" label="Part-Time Permanent">Part-Time Permanent</option>
                    <option value="4" label="Part-Time Temporary">Part-Time Temporary</option>
                    <option value="5" label="Contractor/Consultant">Contractor/Consultant</option>
                    <option value="6" label="Other">Other</option>
                </select>
            </div>
            <div class="group_combo" id="group_combo">
                <input type="text" name="salary_min" id="salary_min" value="" class="txtinput" onfocus="if(this.value=='Min salary') this.value='';" onblur="if(this.value=='') this.value=('Min salary');">
                <input type="text" name="salary_max" id="salary_max" value="" class="txtinput" onfocus="if(this.value=='Max salary') this.value='';" onblur="if(this.value=='') this.value=('Max salary');">
            </div>
        </div>
    </dl>
</form>     
<div id="advanced_search_div"> 
   <a href="#" id="advanced_search_show" title="More">&rsaquo; More</a>
</div>

Javascript:

$('#advanced_search_show').click(function(){
    $('#advanced_search').toggle();
});

更新:我发现 Chrome 中的文本框聚焦存在问题，当我聚焦于文本框时，它会自动扩展两行之间的填充。我非常感谢任何帮助 ^_^ 。 (我尝试在 Chrome 中更新这个问题，但它崩溃了 >_< ，我必须更改为 Firefox)。

Answer 1

从你的问题的声音来看，我认为点击处理程序正在通过 Chrome 中的 DOM 冒泡。每次连续的单击都会再次调用 toggle() 以停止动画。考虑到这一点，调用 stopPropagation 可能会有所帮助:

$('#advanced_search_show').click(function(e) {
    e.stopPropagation();
    $('#advanced_search').toggle();
});