jQuery toggle（）在Firefox上运行良好，但在Chrome中出现奇怪的现象

我在我的表单中创建了一个“更多”链接，它在Firefox和IE9上运行良好，但在Chrome上运行异常。点击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>

---

更新：我发现Chrome中的文本框对焦有问题，当我对焦文本框时，它会自动扩展两行之间的填充。非常感谢您的帮助。（我试图在Chrome中更新这个问题，但从你的问题的声音来看，它崩溃了。我认为点击处理程序正在Chrome中的DOM中冒泡。然后，每次连续的点击都会再次调用

切换（）

，以停止动画。记住，调用

stopPropagation

可能会有帮助：

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

尝试：

我在JSFIDLE上给出的示例没有使用超链接，因此不需要防止默认设置

---

我发现了我的anwser，只是一个css问题，这使得textbox不适合我的大分区。谢谢你们的帮助^。^

在你的代码中似乎没有id为：

advanced\u search\u show

的元素？你的代码缺少更多链接吗？我在JSFIDLE上举了一个例子：它在IE中工作，你能在chrome中测试它吗我做的另一个改变是让你的

advanced_search

div

display:none

对不起，我没有在上面的代码中添加show more链接，我刚刚更新了我的代码。

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

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