Master-X
Форум | Новости | Статьи
Главная » Форум » Программинг, Скрипты, Софт, Сервисы » 
Тема: Скрытый текст свернуть развернуть
цитата
27/01/19 в 22:53
 cherchell2010
уже битый час кручу верчу и не работает.
вот пример кода
https://codepen.io/anon/pen/mENwdY

вот
это пишу в хтпмл


<head>
</head>
<body>

<script type="text/javascript"> //разворачиваем/сворачиваем отзыв
$('#button').on('click', function(e) {
      $('#block').slideToggle(function() {
        $(e.target).text($(this).is(':visible') ? 'Меньше' : 'Больше');
      });
});
</script>

<div id="block" style="display: none;">Содержимое</div>
<div id="button">Больше</div>



<style>

#button {
  cursor: pointer;
}

</style>

</body>
</html>

и не работает
что я упускаю?
цитата
28/01/19 в 00:20
 cherchell2010
я думаю что не запускается сам джава скрипт.
почему?
цитата
28/01/19 в 03:27
 trafflo
вот так в <head> вставь

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  $('#button').on('click', function(e) {
      $('#block').slideToggle(function() {
        console.log($(e.target).is(':visible'));
        $(e.target).text($(this).is(':visible') ? 'Меньше' : 'Больше');
      });
  });
});
</script>
цитата
28/01/19 в 11:39
 11-11-11
еще вариант на jquery


<a href="#" onclick="$('.spoiler').toggle();return false;">Подробнее...</a>

<div class="spoiler" style="display: none;">Скрытый текст</div>

цитата
28/01/19 в 12:24
 zhekats
Ты вешаешь обработчик на кнопку, которой в момент вызова скрипта не существует.
Либо оберни скрипт в $(document).ready(function() { ТУТ_СКРИПТ });

Пример:

Код:
<script type="text/javascript"> //разворачиваем/сворачиваем отзыв
$(document).ready(function() {
    $('#button').on('click', function(e) {
        $('#block').slideToggle(function() {
            $(e.target).text($(this).is(':visible') ? 'Меньше' : 'Больше');
        });
    });
});
</script>


Либо поставь скрипт ниже элементов.
цитата
29/01/19 в 17:57
 phpdev2017
cherchell2010 писал:
уже битый час кручу верчу и не работает.
вот пример кода
https://codepen.io/anon/pen/mENwdY

вот
это пишу в хтпмл


<head>
</head>
<body>

<script type="text/javascript"> //разворачиваем/сворачиваем отзыв
$('#button').on('click', function(e) {
      $('#block').slideToggle(function() {
        $(e.target).text($(this).is(':visible') ? 'Меньше' : 'Больше');
      });
});
</script>

<div id="block" style="display: none;">Содержимое</div>
<div id="button">Больше</div>



<style>

#button {
  cursor: pointer;
}

</style>

</body>
</html>

и не работает
что я упускаю?


Вы упускаете тот факт, что на сайте примера, уже подключен jquery, а у вас нет. И поэтому у вас не отрабатывало.

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>

вот это добавите и все отработает.

Далее. Посоветовал бы вам пройти минимальный курс по jQuery очень полезно на будущее..

https://www.youtube.com/watch?v=0sjmobLgzoI
цитата
29/01/19 в 20:51
 trafflo
phpdev2017 писал:
Вы упускаете тот факт, что на сайте примера, уже подключен jquery, а у вас нет. И поэтому у вас не отрабатывало.

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>

вот это добавите и все отработает.


если подключить просто jquery, то не отработает. У него ошибка в коде изначально
он забыл добавить в начале
Цитата:
$(function() {


ну и инклюд само собой нужен с jquery


Эта страница в полной версии