Question

我有一个简单的应用程序，我想使用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>

...和javascript（上面的html中的test.js参考）：

$(document).ready(function(){
// Show options to add workorder
    // $("#WOAddFields").hide();
    $("#buttonShowFields").click(function(){
    $("#InfoAddFields").toggle();
    });

});

Answer 1

单击按钮

时，阻止使用event.preventDefault()提交

http://jsfiddle.net/3NPPP/

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

});

Answer 2

使用普通的javaScript使用以下函数切换元素时遇到了同样的问题：

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

我注意到当我将display：none添加到我要切换的元素的CSS时，我需要双击才能首先显示该元素。要解决此问题，我必须明确地将 style =“display：none”添加到HTML元素标记。

Answer 3

而不是......

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

使用此...

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

Answer 4

请更改事件方法以绑定而不是单击。

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

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

4 个答案: