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
.not()
like that, wouldn't you need to use.add()