Форум

Alexbelkevich · #1 (**permalink**) 18.01.2016, 12:29

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

$('#search-loop').click( function() {
	
		$('#search-text').toggle(function () {
	    $("#search-text").css({padding: "0px", width: "0px"});
	}, function () {
	    $("#search-text").css({padding: "4px", width: "180px"});
	});
		});

CSS

Код:

.top-block-search input[type="text"] {
    position: absolute;
    right: 30px;
    width: 0px;
    border-radius: 10px;
    border: none;
    padding: 0px;
}

При клике на кнопку должен вылезать поиск. Почему с первого раза не хочет?

рони · #2 (**permalink**) 18.01.2016, 12:52

Alexbelkevich,
потому что если у вас современное jQuery то код полный бред, не читайте старых книжек про jQuery и добавьте html

рони · #3 (**permalink**) 18.01.2016, 13:01

Alexbelkevich,
вариант почему не работает первый клик: потому что было 0 присвоили ноль (для старого метода toggle) и только по второму клику padding: "4px", width: "180px" поменяйте строки 4 и 6 местами.

рони · #4 (**permalink**) 18.01.2016, 13:09

Alexbelkevich,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .top-block-search input[type="text"] {
    position: absolute;
    right: 30px;
    width: 0px;
    border-radius: 10px;
    border: none;
    padding: 0px;
}
.top-block-search input[type="text"].active {
  transition: all .8s ease-in-out;
    width: 180px;
    padding: 4px;
    background-color: #A9A9A9;
}
.top-block-search input[type="text"]:focus  {
   outline: none;
}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function(){
$('#search-loop').click( function() {

		$('#search-text').toggleClass('active')
})
});


  </script>
</head>

<body>
<input id="search-loop" name="" type="button" value="go">
<nav class="top-block-search">
 <input id="search-text" type="text">
</nav>



</body>

</html>

phoenix200689 · #5 (**permalink**) 07.02.2017, 14:18

Всем привет, столкнулись с аналогичной проблемой, фрэйм с камерой открывается только со второго раза:

$("#PLAG").on("click", function(){		
		$("#PLAG").popover({
			title: "<span style=float:left>Камера" + " " +  "Пляж</span>" + "<span alt='Закрыть' id='popovercloseidvc1'></span>",
			content: '<table style=z-index:9999 class=table table-condensed><tbody><tr><td><iframe src=https://ipcamlive.com/player/player.php allowfullscreen;></iframe></td></tr></table>',
			html:true
		});
		
		//Закрывает поповер
			$(document).click(function(e) {
        	 if(e.target.id=="popovercloseidvc1" ) {
				$(".popover").remove();                
				}
      		});		
      });

Что делаем не правильно? =)

рони · #6 (**permalink**) 07.02.2017, 14:34

phoenix200689,
строку 14 перенести в строку 7

Форум

Справочник

Discord чат

Курсы javascript