Javascript .toggle（）有时在工作前双击_Javascript_Jquery_Html

Javascript .toggle（）有时在工作前双击

javascript jquery html

Javascript .toggle（）有时在工作前双击,javascript,jquery,html,Javascript,Jquery,Html,我有一个简单的应用程序，我想使用jQuery的.toggle效果在显示和隐藏字段集中的元素之间切换。问题是，有时我必须双击启用切换的按钮才能使其工作有什么想法吗 HTML: <!DOCTYPE html> <html> <head> <script src="jquery-2.1.1.min.js"></script> <script src="test.js"></script> </h

我有一个简单的应用程序，我想使用jQuery的.toggle效果在显示和隐藏字段集中的元素之间切换。问题是，有时我必须双击启用切换的按钮才能使其工作

有什么想法吗

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="test.js"></script>
</head>
<body>
    <div class="LeftFrame">
    <div id="LeftTable"><strong>Left</div>
    </div>
    <div id="MainTable"><strong>Main
    <div>
        <br>
        <form><fieldset><legend><button id="buttonShowFields">Add Info</button></legend>
        <div id="InfoAddFields">
            ID: <input type="text"><br>
            Serial Number: <input type="text"><br>
            Location: <select id="inputLocation">
            <option>Location1</option>
            <option>Location2</option></select><br>
            Status: <select id="inputStatus">
            <option>Complete</option>
            <option>In Process</option></select><br>
        </div>
        </fieldset></form>
    </div>
    </div>
</body>
</html>

而不是这个

    <button id="buttonShowFields">Add Info</button>

添加信息

用这个

    <input type="button" id="buttonShowFields" value="Add Info" />

请将事件方法更改为绑定，而不是单击

$("#buttonShowFields").bind('click',function(){
    $("#InfoAddFields").toggle();
});

单击按钮时阻止提交

当使用纯javaScript通过以下函数切换元素时，我也遇到了同样的问题：

function toggle(element){
  if (element.style.display !== "none")
    element.style.display = "none";
  else element.style.display = "block";
}

我注意到，当我在想要切换的元素的CSS中添加display:none时，我需要双击以首先显示该元素。要解决这个问题，我必须显式地将style=“display:none”添加到HTML元素标记中。

当双击切换时，您能说些什么吗？动画还在运行吗？只装第一批货吗？是在你已经切换之后吗？第一次“错过”的点击是否接近上一次点击，并因此注册为上一次点击的第二次点击？如果在click语句中添加一个console.log，那么所有console.log事件是否都会显示出来，或者它们是否也丢失了？在单击按钮时，您如何防止表单被提交？对我来说似乎很好（在阻止表单提交并修复一些HTML之后）@EliGassert：似乎只是需要随机双击。有时双击和单击都不起作用。在单击的块中切换之前添加console.log可验证偶尔一次单击根本没有注册。您在第一个select元素上缺少关闭

。您是否正在采取措施阻止表单提交？

$(document).ready(function(){
    $("#buttonShowFields").click(function(e){
       e.preventDefault();
       $("#InfoAddFields").toggle();
    });

});

function toggle(element){
  if (element.style.display !== "none")
    element.style.display = "none";
  else element.style.display = "block";
}