logo标签列表

jQuery 切换函数在第一次点击时无法工作

jquery
4
我在创建ASK问题的文档时意识到了这个问题的解决方案...所以我发布了答案，如果没有其他原因，也是为了将来不浪费时间。
3个回答
4
如果在页面渲染时要TOGGLE的内容是显示的（可见的），则函数的顺序如下，如果该内容最初是隐藏的，则反转函数。
<html>
<head>
<style>
 #upperDiv {width:200px; height:20px; text-align:center; cursor:pointer; }
 #lowerDiv {width:200px; height:20px; background-color:red; border:#206ba4 1px solid;}
</style>

<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function(){
$('#upperDiv').toggle (
    function(){ 
        $("#lowerDiv").hide() ; 
        },
    function(){ 
        $("#lowerDiv").show() ; 
        }
); // End toggle
 }); // End eventlistener

</script>
</head>
<body>
<div id="upperDiv" >Upper div</div>
<div id="lowerDiv" >Lover Div</div>
</body>
</html>
2

toggle() 在某些情况下相当不稳定，我曾经遇到它会对勾选框（取消勾选）和其他各种问题进行奇怪的操作。我建议只使用点击事件来处理它，这样就少了很多小烦恼。而且这种方式，您不必担心首先 #lowerDiv 处于什么状态:

$('#upperDiv').click(function() {
    $('#lowerDiv').animate({
        'opacity' : 'toggle',
    });
});
0
我知道这是一个很老的问题，但为了那些正在寻找快速解决方案的人，这对我有用：
a. 在 PHP/HTML 文件中：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/.../jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#pClick").click(function(){          
            $("#pText").toggle();
            $("#pText").text("...");
        });
    });
    </script>
在 CSS 文件中： 
#pText {display: none;}

现在即使在第一次点击时也能正常工作。这是一个简单、快速的答案，我希望它有用。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接