Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   подскажите скрипт для сворачивания текста (https://javascript.ru/forum/misc/48934-podskazhite-skript-dlya-svorachivaniya-teksta.html)

tsigel 23.07.2014 15:56 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#spoiler {
 overflow: hidden;
 height: 30px;
 line-height: 15px;
}
#spoiler.active {
 height: auto;
}
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
больше параметров<br>
еще больше параметров<br>
намного больше параметров<br>
</div>
<button>больше параметров</button>
    <script>
      $("button").click(function () {
      if ($("#spoiler").css("height") == "30px") {  
         var height = $("#spoiler").css("height", "auto").height();
         $("#spoiler").css("height", "30px")
         $("#spoiler").animate({"height": height});
     } else {
         $("#spoiler").animate({"height": "30px"});
     }
});
    </script>

frenzy 23.07.2014 16:11
Что-то не работает. Файрбаг показывает, что var height = $("#spoiler").css("height", "auto").height(); выполняется и всё, но в итоге ничего не меняется и всегда выполянется только первое условие
А нет просто стандартной функции, которая могла бы перерендерить страницу после изменения height? Анимация мне не так важна.

tsigel 23.07.2014 16:19
location.reload()

frenzy 23.07.2014 16:37
Разобрался, что-то с условным переходом не то.
Если поставить $("#spoiler").css("height") != "auto", то анимация происходит развертка, но сворачиваться не хочет. В JS точно можно просто так взять и сравнить строки?
Поалертал. В общем округлять как-то нужно, ибо alert($("#jshop_unijax_filter").css("height")); выдает 500.5164px,(в css 500px)

tsigel 23.07.2014 16:44 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#spoiler {
 overflow: hidden;
 height: 30px;
 line-height: 15px;
}
#spoiler.active {
 height: auto;
}
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
больше параметров<br>
еще больше параметров<br>
намного больше параметров<br>
</div>
<button>больше параметров</button>
    <script>
    (function () {
      var flag = true;

    $("button").click(function () {
      if (flag) {  
         var height = $("#spoiler").css("height", "auto").height();
         $("#spoiler").css("height", "30px")
         $("#spoiler").animate({"height": height});
     } else {
         $("#spoiler").animate({"height": "30px"});
     }

flag = !flag;

});

   })()      
    </script>

рони 23.07.2014 16:45
Цитата:
Сообщение от frenzy
$("#spoiler").css("height") != "auto"
это условие будет всегдачаще всего истинно

tsigel 23.07.2014 16:45
Строки сравнивать можно.
Если не важна анимация можно писать вместо 
$("#spoiler").animate({"height": height});

вот так
$("#spoiler").css("height", "30px");
$("#spoiler").css("height", "auto");

рони 23.07.2014 16:57
Цитата:
Сообщение от tsigel
Если не важна анимация можно
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#spoiler {
 overflow: hidden;
 height: 30px;
 line-height: 15px;
}
#spoiler.active {
 height: auto;
}
</style>
<div id="spoiler">
немного параметров<br>
еще чуть-чуть параметров<br>
больше параметров<br>
еще больше параметров<br>
намного больше параметров<br>
</div>
<button>больше параметров</button>
    <script>
    	(function ()
    	  {
    	    var flag = true;
    	    $("button").click(function ()
    	      {$("#spoiler").toggleClass('active')
    	      }
    	    )
    	  }
    	)()
    </script>

frenzy 23.07.2014 17:04
tsigel
27 $("#spoiler").css("height", "30px") - что делает эта строчка вообще и почему нет ; изначально? Ибо я убераю и ничего не происходит.

Вообще ПОЧТИ.
(function($){
	  
	  var collapsed = false;
	  $("#showmore").click(function () {
	  alert($("#jshop_unijax_filter").css("height"));
	  if (collapsed == 0) {  
		 collapsed = true;
		 var height = $("#jshop_unijax_filter").css("height", "auto").height();
		 $("#jshop_unijax_filter").animate({"height": height});
	 } else {
		 $("#jshop_unijax_filter").animate({"height": "500px"});}
		 collapsed = false;
		 })
	  
	  })(jQuery)

Вот только collapsed на true почему-то не меняется вообще. Уж не с локальностью переменных ли проблемы?

tsigel 23.07.2014 17:12
Цитата:
Сообщение от frenzy (Сообщение 322413) 
if (collapsed == 0) {
должно быть
if (collapsed) {


Часовой пояс GMT +3, время: 00:44.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице