Как отделить кнопку JQuery Hide / Show от скрытого / показанного элемента? - PullRequest
Новая
       30

Как отделить кнопку JQuery Hide / Show от скрытого / показанного элемента?

0 голосов
/ 21 февраля 2012

Я хотел бы использовать кликабельный div в своем заголовке, чтобы показать div под моей основной областью контента, но я не могу понять, как это сделать. Прямо сейчас я использую базовый JQuery, как это: 

    jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".expand").click(function()
    {
    jQuery(this).next(".content").slideToggle(500);
    });
});

и HTML, как это: 

<div class="expand">expand</div>
<div class="content">lorem ipsum</div>

но если я разделю два div, функция прекратит работу.

Если вы можете вести меня в правильном направлении, это будет очень цениться!

С уважением

Ответы [ 3 ]

0 голосов
/ 21 февраля 2012

Вы можете использовать nextAll().first() вместо next(). 

jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".expand").click(function() {
        jQuery(this).nextAll(".content").first().slideToggle(500);
    });
});

Таким образом, если у вас есть несколько .content на вашей странице, .expand будет только расширять следующие .content настр.

0 голосов
/ 21 февраля 2012

Здесь можно сделать несколько вещей, чтобы улучшить производительность и стабильность. Во-первых, вместо использования next() метода, вы бы просто использовали 

$('.expand').click(function () { $('.content').slideToggle(500); });

Конечно, это имеет очевидный недостаток (?) Расширения и сжатия всех .content областей при нажатии на любой .expand.

Но вы можете улучшить свою производительность и стабильность, добавив пару атрибутов html в .expand и .content, например так: 

<div class="expand" data-for="content_id">Click to toggle</div>
<div class="content" id="content_id">This is the toggable content</div>

Во-первых, для этого требуется последняя версия jQuery (в идеале 1.6 или выше) для атрибутов data-. Я использую data-for для обозначения того, что один конкретный .expand применяется к одному конкретному .content. Это похоже на использование атрибута for в label и элементах формы.

Во-вторых, к областям .content применяется новый (и уникальный для каждой) id. Это позволяет селекторам jQuery гораздо быстрее нацеливать эти элементы с помощью функции getElementById().

Наконец, новый javascript будет выглядеть так: 

$('.expand').click(function () {
    var id = '#' + $(this).data('for');
    $(id).slideToggle(500); 
});

И если вам нужна функциональность аккордеона (т. Е. Сворачивать все .content при каждом нажатии и активировать элемент, соответствующий нажатому data-for: 

$('.expand').click(function () {
    var id = '#' + $(this).data('for');

    $('.content').slideUp(500);
    $(id).slideDown(500); 
});
0 голосов
/ 21 февраля 2012

но если я разделю два деления, функция прекратит работу.

Потому что вы используете next(), который получает следующий элемент рядом с $(this). Это будет работать независимо от того, где .content находится: 

jQuery(document).ready(function () {
    var $content = jQuery(".content"); // Cache
    $content.hide();
    jQuery(".expand").click(function () {
        $content.slideToggle(500);
    });
});
...