Функция не выполняется или сбрасывается, несмотря на явное условие в JavaScript - PullRequest
Новая
       34

Функция не выполняется или сбрасывается, несмотря на явное условие в JavaScript

0 голосов
/ 22 января 2019

Как показано на рисунке ниже, невозможно повторно запустить зависание после того, как кнопка закрытия, т. Е. «X», запускается в div / modal:

enter image description here

    $(document).ready(function() {

        var $subnav = $('.subnav');

        $(".discover, .watch").hover(
            function(e) {
                $(this).find($subnav).show();
            },
            function() {
                $(this).find($subnav).hide();
            }
        );

        $(".close").on('click', function(e) {
            if (!$subnav) $subnav.show();

            else $subnav.hide();
        });

    });

Это работает на рабочем столе, но не на реальном мобильном устройстве.

Может кто-нибудь помочь?

UPDATE

Как уже упоминалось в комментариях, я должен проверять свойство, поскольку «объекты» внутренне правдивы.

Я попробовал следующее: 

     $(".close").on('click', function (e) {

    console.log('$subnav[0].style.display', $subnav[0].style.display);

    if ($subnav[0].style.display == 'none') $subnav.show();

    else $subnav.hide();
});

Но при проверке разметки я понимаю, что у меня та же проблема с close классом 

 <nav>
   <ul class="nav-categories discover-active">
      <li class="nav-category-and-subnav discover">
         <div class="nav-category">
            <span class="nav-category-padding">Discover</span> 
            <i aria-hidden="true" class="fa fa-angle-down">
               <svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
               </svg>
            </i>
            <div class="subnav" style="display: none;">
               <a href="https://jump.refinery29.com/join/24/signup-ca-refresh"><img src="images/thisweek.jpg"></a>
               <p class="close">X</p>
            </div>
         </div>
      </li>
      <li class="nav-category-and-subnav watch">
         <div class="nav-category">
            <span class="nav-category-padding">Watch</span> 
            <i aria-hidden="true" class="fa fa-angle-down">
               <svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
               </svg>
            </i>
            <div class="subnav" style="display: none;">
               <div class="column">
                  Original Series
               </div>
               <div class="column">
                  Trending Videos
               </div>
               <p class="close">X</p>
            </div>
         </div>
      </li>
   </ul>
</nav>

ОБНОВЛЕНИЕ II

Ниже я попытался явно указать непосредственного родителя, чтобы не было никаких сомнений, что он будет скрывать класс .subnav или разделить кнопку .close, содержащуюся в ...

Но опять работает на рабочем столе, borks на мобильном .... 

    $(".close").on('click', function(e) {
      var $target = $(e.target).parent()[0];
      if ($($($target)).css('display') == 'block') $($target).hide();
    });

1 Ответ

0 голосов
/ 23 января 2019

Я немного поиграл с этим, похоже, вам понадобится специальный код для мобильных устройств, который обрабатывает состояния 'hover' по-своему. 

 $(document).ready(function() {
   $(".discover, .watch").hover(
     function(e) {
       $(this).find('.subnav').css('display', 'block');
     },
     function() {
       $(this).find('.subnav').css('display', 'none');
     }
   );

   //Mobile specific code
   if (!!('ontouchstart' in window)) {
     $(".discover, .watch").off('click mouseenter mouseleave');
     $(".discover, .watch").on('click', function(e) {
       //immitate 'hover' clicks on mobile
       $('.subnav').hide();
       var $target = $(this).find('.subnav').show();
       e.stopPropagation();
     });
     $(document).on('click', function(e) {
       //Hide when touch outside of the toggle classes
       if (!($(e.target).hasClass('discover') || $(e.target).hasClass('watch'))) {
         $('.subnav').hide();
       }
     });
   }

   $(".close").on('click', function(e) {
     var $target = $(e.target).parent();
     if ($target.css('display') == 'block') {
       $target.css('display', 'none');
     }
     e.preventDefault();
     e.stopPropagation();
   });

 });
...