Одновременное расширение одного отдельного подразделения

#javascript #jquery

Вопрос:

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

 $(document).ready(function(){
 var rowsshown = 2;
 var rowheight = 1.2; // line height in 'em'
 var ht = (rowsshown * rowheight) - .5; // subtracting the .5 prevents the top of the next line from showing
 $('.info')
  .css({'overflow':'hidden','line-height' : rowheight   'em','height': ht   'em' });
});  
$('.aaa').click(function(){

        if ( $(".info").css('height') == 'auto') {
$('.info').css('height', ht   'em');
} else {
$('.info').css('height','auto');
   $(this).hide();
}
});

Ответ №1:

Вы могли бы использовать $(this).prev('div') в качестве своего селектора внутри события click вместо $(".info") того, чтобы выбирать каждый элемент, который использует класс info . Видно из этой скрипки: http://jsfiddle.net/Hvvw7/3 /

Обычно мне не нравится это решение, но ваш HTML имеет довольно странную структуру для того, что вы пытаетесь сделать, поэтому это может быть вашим лучшим вариантом.

Ответ №2:

Вам нужно использовать $(this).prev() вместо $('.info') . Использование последнего изменяет все элементы в отличие от соответствующего.

http://jsfiddle.net/zXffb/

Ответ №3:

Проблема в этих строках:

 $('.info').css('height', ht   'em');

amp;

 $('.info').css('height','auto');

Что вы делаете, так это выбираете все элементы DOM с классом .info , а не только тот, который ему предшествует.

Я бы использовал jQuery.prev() в вашем ссылочном div, чтобы получить предшествующий информационный div.

Ответ №4:

Я лично считаю, что самый простой способ решить эту проблему — назначить идентификаторы каждому .info классу, который у вас есть. тогда пусть ваши дополнительные ссылки вызовут функцию вместо того, чтобы просто работать на всех классах.

 <div id="element_link_1" class="info">
    bunch of long text
</div>
<div id="link_1" class="aaa"><a href="#">see more</a></div>

$('.aaa').click(function(){
    toggle($(this).attr('id'));
});

function toggle(id)
{
     if ( $("#element_"   id).css('height') == 'auto') {
        $("#element_"   id).css('height', ht   'em');
     } else {
        $("#element_"   id).css('height','auto');
        $("#link_"   id).hide();
     }
}

1. Ответ Аластера также сработал бы, но я предпочитаю не использовать селекторы jquery для вещей, которые, вероятно, должны управляться идентификатором. Просто потому, что клиентам свойственно переставлять вещи, поэтому, если dom вообще изменится, кто-то должен будет знать, будет ли затронуто .prev() .) или нет. Мои 2 цента — это все.

Ответ №5:

внутри вашей .click() функции для .aaa поиска предыдущего div вместо использования .info

вот так…

 $('.aaa').click(function(){
    var $prev = $(this).prev('div.info');
    if ( $prev.css('height') == 'auto') {
    $prev.css('height', ht   'em');
    } else {
    $prev.css('height','auto');
       $(this).hide();
    }
    });

Ответ №6:

Вот способ сделать it…it скрывает ссылку показать больше для текущего раздела, сворачивает все остальные открытые в данный момент разделы и возвращает туда показать больше ссылок.