Проверка в JS видимости блока со свойством display:none

Общие вопросы по системе юкоз, вопросы по ucoz, вопросы без определенной темы

Проверка в JS видимости блока со свойством display:none

» » Сообщение:

Здравствуйте!

На моём сайте sergeykov.ru есть кнопка "Меню" при нажатии на которую появляется навигация, но если успеть кликнуть на кнопку два раза, то блок с категориями скроется!
Подскажите, как добавить в скрипт проверку видимости блока?

Пробовал самостоятельно через

script Код: Выделить всё Развернуть
if(document.getElementById('box').style.display == 'none')
script Код: Выделить всё Развернуть
if ($element.is(':hidden'))
script Код: Выделить всё Развернуть
$('#elem').is(":hidden")

не получается...

HTML:

html Код: Выделить всё Развернуть
...

<a id="trigger" class="cd-nav-trigger cd-text-replace" href="#primary-nav">Меню<span aria-hidden="true" class="cd-icon"></span></a>

...
html Код: Выделить всё Развернуть
...

<ol>
 <li class="cd-label" style="cursor:default;"><noindex>Навигация по сайту</noindex></li>
 
 <li>
 <a href="/photo">Фотографии автора</a>
 <div id="box" class="hide">

...

JS:

script Код: Выделить всё Развернуть
$(document).ready(function() {
      $("A#trigger").toggle(function() {
        // Отображаем скрытый блок
        $("DIV#box").fadeIn(800); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      }, 
      function() {
        // Скрываем блок
        $("DIV#box").fadeOut(0); // fadeOut - плавное исчезновение
        return false; // не производить переход по ссылке
      }); // end of toggle()
    }); // end of ready()
javascript, css, display:none, div, видимость блока, свойство, условие

Re: Проверка в JS видимости блока со свойством display:none

Admin » » Сообщение:

Fearfire писал(а) › 09 мар 2017, 19:09:Подскажите, как добавить в скрипт проверку видимости блока?

Все правильно:

Код: Выделить всё Развернуть
if($('div#box').is(':hidden')){
 .. показываем блок ..
}

Но, правильнее было бы переделать скрипт, с toggle на click в котором и проверять состояние блока. Или использовать .fadeToggle()

Однако, после того, как вы кликнули первый раз - блок уже не скрытый, в данном случае (.fadeIn()), там происходит плавное увеличение opacity..
Так что тут нужно проверять не столько на видимость, сколько на наличие анимации на нем:

Код: Выделить всё Развернуть
if($('div#box').is(':animated')) // Происходит какая-то анимация..

Типа:

Код: Выделить всё Развернуть
$('#trigger').click(function(){
   if(если нет анимации){
      if(если блок скрыт){
         открываем блок
      }else{
         закрываем блок
      }      
   }else{
      return false; // если происходит анимация (открытие или закрытие) возвращаем false
   }
});

Re: Проверка в JS видимости блока со свойством display:none

Fearfire » » Сообщение:

Admin писал(а) › 09 мар 2017, 19:33:Так что тут нужно проверять не столько на видимость, сколько на наличие анимации на нем

При двойном нажатии на кнопку блок закрывается. Посмотрите скрипт, всё правильно?...

script Код: Выделить всё Развернуть
$('#trigger').click(function(){
   if(!$('div#box').is(':animated')){
      if($('div#box').is(':hidden')){
         $("div#box").fadeIn(800);
        return false;
      }else{
         $("div#box").fadeOut(0);
        return false;
      }     
   }else{
      return false;
   }
});

Ситуация следующая: на главной странице есть категории по клику на которые открывается описание и кнопка перехода в категорию;
также имеется кнопка меню, при клике вызывается структура всех категорий и альбомов.

Когда категории с альбомами остаются развёрнутыми и мы находимся на начальной странице, и если высота блока больше экрана, то блок растягивает страницу (см. скрин),
поэтому он и должен быть свёрнут, если мы покинули навигацию...

Последний раз редактировалось Fearfire 10 мар 2017, 21:08, всего редактировалось 1 раз.

Re: Проверка в JS видимости блока со свойством display:none

Admin » » Сообщение:

Fearfire писал(а) › 10 мар 2017, 17:11:При двойном нажатии на кнопку блок закрывается. Посмотрите скрипт, всё правильно?...

Все правильно, но не наблюдаю ситуации, когда при двойном клике блок закрывается..
Все работает нормально - мозилла..

Fearfire писал(а) › 10 мар 2017, 17:11:Когда категории с альбомами остаются развёрнутыми и мы находимся на начальной странице, и если высота блока больше экрана, то блок растягивает страницу (см. скрин),
поэтому он и должен быть свёрнут, если мы покинули навигацию...

Вот это вообще не понял, но это точно не относится к данному скрипту.


Re: Проверка в JS видимости блока со свойством display:none

Fearfire » » Сообщение:

Admin писал(а) › 10 мар 2017, 18:49:не наблюдаю ситуации, когда при двойном клике блок закрывается

Сделал комбинацию из трёх скриптов, только осталось чтобы знак "+" присваивался "id testlinks" при клике на кнопку меню...

script Код: Выделить всё Развернуть
//появление или скрытие  блока при клике на +,-
$(document).ready(function() {
      $("A#trigger").toggle(function() {
        $("DIV#box").fadeIn(800);
        return false;
      }, 
      function() {
        $("DIV#box").fadeOut(0);
        return false;
      });
    });

//скрытие блока при клике на Меню
$('#trigger_s').click(function(){
    if($('div#box').is(':visible')){
         $("div#box").fadeOut(0);
        return false;
    }
});

//замена знаков +,-
$(function(){
   $('#testlinks').click(function(){
      var text = $(this).text();
      $(this).text(text == "+" ? "-" : "+");
    })
})     

Изменения в HTML

html Код: Выделить всё Развернуть
<a id="trigger_s" class="cd-nav-trigger cd-text-replace" href="#primary-nav">Меню<span aria-hidden="true" class="cd-icon"></span></a>
html Код: Выделить всё Развернуть
<ol id="box" class="hide">
 <li class="cd-label" style="cursor:default;"><noindex>Навигация по сайту</noindex></li>
 
 <li>
 <span><a href="#" id="trigger" class="plus_p"><span id="testlinks" class="plus_m">+</span></a></span>
 <a href="/photo">Фотографии автора</a>
 <div id="box" class="hide">


Re: Проверка в JS видимости блока со свойством display:none

Fearfire » » Сообщение:

Admin писал(а) › 11 мар 2017, 01:17:Мне кажется, что лучше объединить 1 и 3 скрипт..
script Код: Выделить всё Развернуть
//появление или скрытие  блока при клике на +,-
$(document).ready(function() {
      $("A#trigger").toggle(function() {
        $("DIV#box").fadeIn(800);
                var text = $(this).text();
      $(this).text(text = "-");
        return false;
      }, 
      function() {
        $("DIV#box").fadeOut(0);
                var text = $(this).text();
      $(this).text(text = "+");
        return false;
      });
    });

//скрытие блока при клике на Меню
$('#trigger_s').click(function(){
    if($('div#box').is(':visible')){
         $("div#box").fadeOut(0);
        return false;
    }
});

Только теперь span (+,-) выбивается из блока, не смог $('#testlinks') прилепить в скрипт...

И как сделать чтобы при выполнении этого скрипта

script Код: Выделить всё Развернуть
//скрытие блока при клике на Меню
$('#trigger_s').click(function(){
    if($('div#box').is(':visible')){
         $("div#box").fadeOut(0);
        return false;
    }
});

присваивалось значение "+" для $('#testlinks') ??



Re: Проверка в JS видимости блока со свойством display:none

Fearfire » » Сообщение:

Admin писал(а) › 11 мар 2017, 12:31:Аналогично и для плюса..

Спасибо.

script Код: Выделить всё Развернуть
//появление или скрытие  блока при клике на +,-
$(document).ready(function() {
      $("A#trigger").toggle(function() {
        $("DIV#box").fadeIn(800);
         $('#testlinks').text('-');
        return false;
      }, 
      function() {
        $("DIV#box").fadeOut(0);
         $('#testlinks').text('+');
        return false;
      });
    });

//скрытие блока при клике на Меню
$('#trigger_s').click(function(){
    if($('div#box').is(':visible')){
         $("div#box").fadeOut(0);
          $('#testlinks').text('+');
        return false;
    }
});

return false; обязательно использовать во всех местах скрипта?

Скрипт полностью рабочий, за исключением одного момента:
1) Нажимаем кнопку меню
2) Нажимаем "+" (список разворачивается)
3) Нажимаем кнопку меню (список сворачивается и открываются категории)
4) Повторяем пункт 1 и 2 (и теперь кнопку "+" приходится нажимать дважды - как исправить?)


Re: Проверка в JS видимости блока со свойством display:none

Admin » » Сообщение:

Fearfire писал(а) › 11 мар 2017, 18:42:return false; обязательно использовать во всех местах скрипта?

Нет, это нужно для того, что бы, если у вас ссылка имеет вид:

plain Код: Выделить всё Развернуть
<a href="#" id="trigger"> ...</a>

страница не прыгала кверху..

Fearfire писал(а) › 11 мар 2017, 18:42:приходится нажимать дважды - как исправить?)

Как писал выше:

Admin писал(а) › 09 мар 2017, 19:33:переделать скрипт, с toggle на click в котором и проверять состояние блока

Или, как вариант, изменит вот этот фрагмент вот так:

Код: Выделить всё Развернуть
    if($('div#box').is(':visible')){
         $("A#trigger").trigger('toggle');
          $('#testlinks').text('+');
        return false;
    }

ps
Если не сработает

Код: Выделить всё Развернуть
$("A#trigger").trigger('toggle');

то

Код: Выделить всё Развернуть
$("A#trigger").trigger('click');





Похожие темыКомментарии ПросмотрыПоследнее сообщение
0770Стоп спамер. Проверка пользователей...
Сообщение от: Admin
0425Java Script проверка E-mail введенн...
Сообщение от: Admin
1453Re: Проверка на подтверждение е-май...
Сообщение от: Kzander
2419Re: Проверка на распущенность..)
Сообщение от: Vodolina
5800Re: Плавное появление блока с меню ...
Сообщение от: Admin