1

    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.com/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

4
  • 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
    Feb 12, 2015 at 13:09
  • @atmd Sorry. I've now edited it. How would I use .add()?
    – glenn223
    Feb 12, 2015 at 13:16
  • as per BenM's answer
    – atmd
    Feb 12, 2015 at 13:17
  • @atmd Thanks .add() has been a success. What would I do without you guys(and gals)?
    – glenn223
    Feb 12, 2015 at 13:35

1 Answer 1

4

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 combine $(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();
4
  • I think if you can pass in an array, you might also be able to use jquery merge(); I will check.
    – lharby
    Feb 12, 2015 at 13:21
  • @lharby You can pass in an array - that's what the first part of my answer says... The first one is to pass an array into the not() function as follows:
    – BenM
    Feb 12, 2015 at 13:22
  • Yes I agree and you gave a very comprehensive answer.
    – lharby
    Feb 12, 2015 at 13:31
  • @BenM The first and second theories don't work (tried them already and also just tried them on my snippet). No idea why. But the .add() has worked. Thanks sooooo much, I've been scratching my head for a few days now. +1,000,000 if I could.
    – glenn223
    Feb 12, 2015 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.