I have the below code and I'm trying to stop if from firing the .hide() on two occasions, currently using .not(). The two occasions are:

• $(this).parent().closest(".HoverChild")
and
• $(this).children(".HoverChild")

EDIT: Because it's not using the second $(this) it's hiding the child element then showing it again.

$(".HoverContainer").on("hover click",function (e) { 

  $('.HoverChild').not(
    $(this).parent().closest(".HoverChild"),
    $(this).children(".HoverChild")
  ).hide();

  if ($(".HoverContainer").is(e.target)){e.stopPropagation();}

$(this).children('.HoverChild').stop(true,true).slideToggle(100);

 });
$("body").on("hover click",function (e){ if (!$(".HoverContainer").is(e.target) && $(".HoverContainer").has(e.target).length === 0) { $(".HoverContainer").children('.HoverChild').hide(); }});
$(".HoverChild").on("hover click",function (e) { e.stopPropagation(); });

html, body{ WIDTH: 100%; HEIGHT: 100%}

<script src=".10.2/jquery.min.js"></script>
<span class="HoverContainer" style="Float:Left;">
  <img src="" alt="View Categories" style="width:20px;height:20px;">
  <div class="HoverChild" style="display: none;">
    <ol class="top-nav" >
		<li class="HoverContainer" >Parent
          <ul class="HoverChild" style="display: none;">
            <li><a href="javascript:void(0);">Sub 1</a></li>
            <li><a href="javascript:void(0);">Sub 2</a></li>
          </ul>
        </li>
    </ol>
  </div>
</span>

    I have the below code and I'm trying to stop if from firing the .hide() on two occasions, currently using .not(). The two occasions are:

• $(this).parent().closest(".HoverChild")
and
• $(this).children(".HoverChild")

EDIT: Because it's not using the second $(this) it's hiding the child element then showing it again.

$(".HoverContainer").on("hover click",function (e) { 

  $('.HoverChild').not(
    $(this).parent().closest(".HoverChild"),
    $(this).children(".HoverChild")
  ).hide();

  if ($(".HoverContainer").is(e.target)){e.stopPropagation();}

$(this).children('.HoverChild').stop(true,true).slideToggle(100);

 });
$("body").on("hover click",function (e){ if (!$(".HoverContainer").is(e.target) && $(".HoverContainer").has(e.target).length === 0) { $(".HoverContainer").children('.HoverChild').hide(); }});
$(".HoverChild").on("hover click",function (e) { e.stopPropagation(); });

html, body{ WIDTH: 100%; HEIGHT: 100%}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="HoverContainer" style="Float:Left;">
  <img src="" alt="View Categories" style="width:20px;height:20px;">
  <div class="HoverChild" style="display: none;">
    <ol class="top-nav" >
		<li class="HoverContainer" >Parent
          <ul class="HoverChild" style="display: none;">
            <li><a href="javascript:void(0);">Sub 1</a></li>
            <li><a href="javascript:void(0);">Sub 2</a></li>
          </ul>
        </li>
    </ol>
  </div>
</span>

    Your help on this would be greatly appreciated. Many thanks.

glenn2223

• javascript
• jquery

• 1 What part isn't working? whats the question. I didn't know you could have multiple objects in .not() like that, wouldn't you need to use .add() – atmd Commented Feb 12, 2015 at 13:09
• @atmd Sorry. I've now edited it. How would I use .add()? – glenn223 Commented Feb 12, 2015 at 13:16
• as per BenM's answer – atmd Commented Feb 12, 2015 at 13:17
• @atmd Thanks .add() has been a success. What would I do without you guys(and gals)? – glenn223 Commented Feb 12, 2015 at 13:35

1 Answer 1

not() only accepts a single argument. You have three options to achieve what you would like. The first one is to pass an array into the not() function as follows:

$('.HoverChild').not([
    $(this).parent().closest('.HoverChild'),
    $(this)
]).hide();

Alternatively, you need to filter down the results after the first parameter of the not() function is evaluated. You can either do that by chaining another not() function to the filter, for example:

$('.HoverChild').not( $(this).parent().closest('.HoverChild') )
                .not ($(this) )
                .hide();

Or you can bine $(this).parent().closest('.HoverChild') and $(this) into a single jQuery collection using add(), and then evaluate not() on that:

var $not = $(this).parent().closest('.HoverChild').add( $(this) );
$('.HoverChild').not($not).hide();