Скрытие определенных Дивов (не вложенных, к сожалению)


Я работаю с устаревшим кодом, который генерируется автоматически и должен соответствовать следующей структуре:

<div id="TITLE1"></div>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
.... (there can be more divs here, IDs can vary as well) ...
<div id="TITLE2"></div>

Сейчас я хочу сделать следующее:

  • сделать TITLE1 кликабельным
  • После нажатия кнопки скрыть все нижележащие DIVs (не вложенные и не могут быть вложены)
  • Еще один щелчок на TITLE1 показывает ранее скрытый DIVs снова
  • скрывают только те DIVs, которые следуют за TITLE до следующего TITLE (исключая)

Решение может используйте jQuery или подобные фреймворки.

3   3   2013-08-26 14:50:11

3 ответа:

Попробуйте

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').toggle();
})

Демо: Скрипка

Основная логика проста-сделать divs с идентификатором, начинающимся с TITLE кликабельным, добавив обработчик кликов - для этого используется атрибут , начинающийся с селектора. Затем найдите все divs между выбранным элементом и следующим элементом с идентификатором, начинающимся с TITLE - это делается с помощью .nextUntil () метод обхода. Затем .toggle () используется для скрытия / отображения элемента

Возможно, что-то вроде этого:

$(document).ready(function() {
    $("body").on("click", 'div[id^="TITLE"]', function() {
        $(this).nextUntil('div[id^="TITLE"]').slideToggle();
    });
});

Демо: http://jsfiddle.net/cjZzG/

То есть всякий раз, когда нажимается div, который имеет id, начинающийся с текста "TITLE", используйте .nextUntil() метод , чтобы выбрать каждый элемент до следующего такого div, а затем переключить их видимость.

Было бы намного проще, если бы вы могли обернуть элементы title1 и div-# в один div. Затем вы можете обнаружить щелчок по title1, захватить родителя, а затем скрыть всех детей, кроме заголовка div.

Что-то вроде этого:

<div>
    <div class="title">Toggle divs</div>
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
    <div id="div3">Div3</div>
</div>
<div>
<div class="title">Toggle divs</div>
    <div id="div1">Div4</div>
    <div id="div2">Div5</div>
    <div id="div3">Div6</div>
</div>      

$(document).ready(function() {
    $('.title').click(function() {
       $(this).parent().children().not('.title').toggle(1000); 
    });
});

Это решение я бы использовал, поскольку оно группирует элементы логически: лучше для SEO и читабельности кода.

Http://jsfiddle.net/WBH7C/

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

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').find('div[id^=div-]').toggle();
})