Function not executing or resetting despite explicit condition in JavaScript

Question

As the gif below illustrates, one cannot re-trigger the hover again once the close button i.e. "X" is fired in the div/modal:

    $(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();
        });

    });

This works in desktop but not on an actual mobile device.

Can someone help?

UPDATE

As mentioned in the comments I should be checking a property as 'objects' are internally truthy.

I tried the following:

     $(".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();
});

But on inspection to the markup I am realizing I am having the same problem with the close class

 <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>

UPDATE II

I tried below to explicitly target the direct parent here, so there would be no doubt it would be hiding the .subnav class or div the .close button is contained by...

But again works on desktop, borks on mobile....

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

^ As above the if statement looks fishy. What browsers have you tried? — Zakk Diaz, Jan 22 '19 at 18:19
@Taplar I just updated my question based on what you suggest @ZakkDiaz I am testing on chrome dev tools and an actual iphone8... @epascarello I'm doing that because there is a specific `div` or `modal` for each nav link. That just drills down to ensure I find the right one as the class names are same — Antonio Pavicevac-Ortiz, Jan 22 '19 at 18:39
I'm not sure what you changed related to my comment, because you are still doing that same if statement. — Taplar, Jan 22 '19 at 18:47

score 0 · Answer 1 · answered Jan 23 '19 at 14:57

I've played with it a bit, it seems that you'll need to have mobile specific code handling the 'hover' states in a custom way.

 $(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();
   });

 });

This question helped me: https://stackoverflow.com/questions/12186892/hover-and-click-event-on-mobile-devices — Kaizen Programmer, Jan 23 '19 at 14:59

Function not executing or resetting despite explicit condition in JavaScript

1 Answers1