Функция jQuery Toggle не работает при первом нажатии - PullRequest
3 голосов
/ 14 ноября 2008

Я понял решение этой проблемы, когда создавал документацию, чтобы задать этот вопрос ... поэтому я публикую ответ, если не по какой-либо другой причине, кроме как не позволить мне тратить время на это в будущем

Ответы [ 3 ]

3 голосов
/ 14 ноября 2008

Если контент, который должен быть TOGGLEd, отображается (отображается) при визуализации страницы, функции будут в следующем порядке, если контент скрыт первоначально, затем сторнируйте функции

<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 голосов
/ 14 ноября 2008

toggle() иногда довольно глючит, у меня были странные вещи с галочками (снятие галочки с них) и другие разные проблемы. Я бы посоветовал просто обработать это с помощью события щелчка, а это намного меньше мелких неприятностей. и, таким образом, вам не нужно беспокоиться о том, в каком состоянии находится #lowerDiv:

$('#upperDiv').click(function() {
    $('#lowerDiv').animate({
        'opacity' : 'toggle',
    });
});
0 голосов
/ 08 декабря 2017

Я знаю, что это действительно старый вопрос, но только для людей, которые ищут быстрое решение, мне это помогло:

а. в файле 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;}

Теперь работает даже при первом нажатии. Это простой, быстрый ответ, который, я надеюсь, будет полезен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...