элементы внутри скрытого элемента не скрыты - PullRequest
Новая
       21

элементы внутри скрытого элемента не скрыты

2 голосов
/ 25 июля 2010

Пытаясь создать страницу, на которой я могу фильтровать типы заданий и офисов, используя функцию скрытия / показа, я обнаружил, что если элемент скрыт, то элементу под элементом «говорят» скрыть на самом деле не прячется. Другими словами, скрытие работает, только если отображается фактический элемент.

Вот код для дублирования: Скрыть офис 2, затем скрыть разработчиков, затем снова показать офис 2. Разработчики (которые «должны» быть скрыты) отображают в офисе 2.

Есть ли способ обойти это? Казалось бы, jquery скрыл бы и элементы sub, но это не так. 

<input  type="checkbox" id=office1 name="test"  class="link1" />Office 1<BR>
<input  type="checkbox" name="office2"  checked='true' class="link2"/>Office 2<BR>
<input  type="checkbox" name="office3"  checked='true' class="link3" />Office 3<BR>
<input  type="checkbox" name="developer"  checked='true' class="link4" />Developer<BR>
<input  type="checkbox" name="receptionist"   checked='true' class="link5" />Receptionist<BR>
<input  type="checkbox" name="manager"   checked='true' class="link6" />Manager<BR>
<table border='1'>
    <tr>
        <td class="toggle-item-link1"><B>Office 1</B><HR>
        <div class="toggle-item-link6"><BR>Manager</div>
        <div class="toggle-item-link6"><BR>Manager</div>
        <div class="toggle-item-link6"><BR>Manager</div>
        </td>
    </tr>
    <tr >
        <td class="toggle-item-link2"><B>Office 2</B><HR>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link6"><BR>Developer</div>
        <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>
    <tr>
        <td class="toggle-item-link3"><B>Office 3</B><HR>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>

        <td>
        </td>
    </tr>
</table>
<script>
$(document).ready(function() {

    $('[class^=link]').click(function() {
        if ($(this).attr("checked")) {
            var $this = $(this);
            var x = $this.attr("className");
            //when 'checked'

            $('.toggle-item-' + x).show(1000);

            return;
        }
        //when 'unchecked'
        var $this = $(this);
        var x = $this.attr("className");

        $('.toggle-item-' + x).hide(1000);
    });

});
</script>

Ответы [ 3 ]

3 голосов
/ 25 июля 2010

Поскольку .hide() со скоростью анимации будет работать только на видимых элементах, вы можете добавить к этому случае и скрытые, например, здесь (еще несколько оптимизаций здесь, просто сокращаякод): 

$('[class^=link]').click(function()  {
    var x =  $(this).attr("className");
    if (this.checked) {
        $('.toggle-item-'  + x).show(1000);
    } else {
        $('.toggle-item-'  + x).hide(1000).filter(':hidden').hide();
    }
});

Вы можете попробовать демо здесь .Мы просто учитываем уже :hidden элементов, которые не анимируются, и пропускаем их, выполняя display: none;, вызывая .hide() без Скорость анимации.

1 голос
/ 25 июля 2010

В дополнение к hide() / show() используйте класс с именем hidden и CSS: 

.hidden {
  display: none;
}

Когда вы скрываете предмет, вы также добавляете класс hidden. И когда вы показываете это, вы также удаляете hidden.

0 голосов
/ 17 июня 2012

Вот более чистое и простое решение: 

$("#randomdiv").hide(1000, function() { $(this).css("display", "none"); });

Обратный вызов hide / show в jQuery вызывает , даже если сама функция не выполняет свою работу из-за родителяэлементы.Используя описанный выше метод с jQuery, элементы будут скрываться независимо от того, находятся ли они в скрытом родительском элементе или нет, а также выполнять обычный плавный переход, если они показаны.

...