JavaScript - не запускать код, если div уже отображается?

0

Мне удалось придумать этот javascript для перехода вниз по div.

Когда вы нажимаете, он перемещает все вверх, а затем сместит тот, который был нажат.

Проблема заключается в том, что при нажатии на один и тот же заголовок, когда он уже открыт, содержимое сканируется, а затем снова возвращается обратно.

Что необходимо для того, чтобы код мог только выполнить резервное копирование, если он уже отображается?

    function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
              $(thelist[i]).slideUp( "slow", function() {});
        }

    //break if the DIV was displayed last!
        var e = document.getElementById(id);
        $( e ).slideDown( "slow", function() {});
    }
  • 0
    Вы можете использовать $ (element) .is (': visible') и $ (element) .length> 0, чтобы найти, присутствует ли div
  • 0
    Почему при использовании jQuery так много смешанного jQuery и обычного JS может превратить всю эту функцию в две строки (см. Мой ответ)?
Теги:

5 ответов

0
Лучший ответ

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

if (document.getElementById(id).clientHeight) return; // already visible

Или, как вы, кажется, используете jQuery:

if ($(e).is(':visible')) return;
Поделиться
  • 0
    @ jfriend00 Я предположил, что элемент был невидим из-за названия вопроса.
  • 0
    Код Jquery работает нормально. Спасибо!
Показать ещё 1 комментарий
0

Я думаю, что элемент, переданный toggle_visiblity принадлежит классу alist. Таким образом, элемент, который вы хотите сдвинуть вниз, сначала будет сместиться во время цикла for, а затем снова спустится после цикла. Добавьте проверку внутри цикла, чтобы проверить, является ли элемент видимым. Если это так, то только слайд-шоу. Что происходит здесь, так это то, что ваш элемент соскальзывает во время цикла, поскольку он является частью списка, а затем снова сместился после цикла. Внутри цикла вы хотите сместить элементы alist, которые не имеют id типа.

Поделиться
  • 0
    Спасибо, это то, что происходит. Я использовал некоторый код от кого-то выше, чтобы проверить, отображается ли DIV, и если это так, то он не будет снова прокручиваться вниз.
0 
function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
              $(thelist[i]).slideUp( "slow", function() {});
        }

    //break if the DIV was displayed last!
        var e = document.getElementById(id);
        if (e.style.display != "none") {
            $( e ).slideDown( "slow", function() {});
        }
    }
Поделиться
  • 0
    Спасибо за код. Сначала я тоже так думал, но, похоже, это не сработало.
0

Его можно записать гораздо проще:

 function toggle_visibility(id) {
     var $e = $(document.getElementById(id));
     if ($e.is(':visible')) return;

     $(".alist").slideUp("slow");
     $e.slideDown("slow");
 }
Поделиться
  • 0
    Спасибо. "If ($ e.is (': visible')) return;" строка должна быть после "$ (". alist "). slideUp (" slow ");" хотя. Но это работает хорошо.
0

Вы можете сделать это намного проще со всеми jQuery следующим образом:

function toggle_visibility(id) {
    var newItem = $("#" + id).slideToggle("slow");
    $("[name='alist']").not(newItem).slideUp("slow");
}

Это очень просто. Переключите переданный элемент и закройте все остальные, которые были открыты. Использует jQuery slideToggle() для обработки переключения для вас.

Поделиться
  • 0
    Спасибо за код. Я только что попробовал это, но только прокручивает вниз div, и они не прокручивают назад после.
  • 0
    @ user3012826 - Что значит прокрутить назад после? Если вы хотите, чтобы переключаемый элемент переключался, тогда вы можете использовать slideToggle() вместо этого для элемента, на который щелкнули. Я изменил свой код, чтобы показать это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню