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

Answer 1

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

 });