Блог

Главная - Вопросы по программированию - jQuery / HTML расширяет DIV

jQuery / HTML расширяет DIV

#javascript #jquery

#javascript #jquery

Вопрос:

Я использую jQuery для расширения div, чтобы показать больше информации (которая находится в div). Однако, когда я нажимаю ссылку «показать больше», как я могу сделать так, чтобы она также расширяла div?

Вот предварительный просмотр моего проекта: http://i55.tinypic.com/2uzrtat.png

Обратите внимание на поле «Соло». Как я могу расширить его до самого низа, если щелкнуть ссылку «посмотреть больше», и наоборот?

— Мой код —

 $(document).ready(function() {
  $('#slickbox').hide();
 
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(300);
    $('.column').animate({height:1000 'px'});
  });
});

Ответ №1:

Редактировать:

 $('#seemore').toggle(
  function(){
      $('#solo').animate({height:700 'px'});
      $(this).html('See Less');
      },
  function(){
      $('#solo').animate({height:500 'px'});
      $(this).html('See More >>');
   });

измените 700 на любую желаемую высоту поля Solo, а 500 — на любую исходную высоту

Смотрите рабочий пример:http://jsfiddle.net/G9z37/4 /

Комментарии:

1. Именно то, что я ищу. Однако, когда я закрываю div, высота по-прежнему остается 700 пикселей

2. извините, я был слишком ленив, чтобы изменить имена div

3. @Ima Хорошо, теперь моя проблема. У меня есть несколько «скрытых» разделов, которые, когда я нажимаю ссылку «посмотреть подробнее», мне нужно расширить. Однако я замечаю, что если у меня есть более одного #solo, то это повлияет только на один из них, а не на все.

4. это потому, что #solo это идентификатор. если вы хотите, чтобы это затронуло все из них, измените его на classname, т.е .solo

5. Идеально! Мне просто нужна помощь еще с одной вещью (извините, я не силен в jQuery). Мне нужно, чтобы при нажатии на ссылку развернуть ее текст менялся на что-то вроде «Смотри меньше». Как я мог это сделать?

Ответ №2:

Я предполагаю, что вы хотите складной div (скрытый по умолчанию, затем раскрывающийся по щелчку). Если это правда, посмотрите на расширение Accordion в плагинах пользовательского интерфейса jQuery, найденных по адресуhttp://jqueryui.com/demos/accordion /. Это также относительно просто реализовать. Если это не то, что вам нужно, пожалуйста, так и скажите.

Ответ №3:

Вы могли бы использовать jquery toggle API

Ответ №4:

Если вы хотите восстановить исходную высоту, вы, вероятно, захотите сохранить исходную высоту с помощью .data() и вернуться к ней при выключении.

Смотрите http://jsfiddle.net/S8yuG /

Ответ №5:

Я не совсем уверен, о чем вы спрашиваете, но если вы хотите изменить высоту div, в jQuery есть функция height.

 $("#solo").height(200);  // or whatever you need

Это то, чего ты хотел?