bootstrap-hover-dropdown
bootstrap-hover-dropdown copied to clipboard
When the 'a' tag has child elements the hover doesnt always work because of the event.target
When i tried something like
<a href="#">
<i class="fa fa-icon-blah"></i>
<span>Something</span>
</a>
And the icon and the span are block elements the hover doesnt always seems to work.
I figured its because of the event.target check thats been
if(!$parent.hasClass('open') && !$parent.is(event.target)) {
And
if(!$parent.hasClass('open') && !$this.is(event.target) )
By changing these to:
if(!$parent.hasClass('open') && !$.contains($parent[0], $(event.target)[0])) {
And
if(!$parent.hasClass('open') && !$.contains($this[0], $(event.target)[0])) {
Seems to be fixing the issue.
Thanks for sharing the code! It's working for me! 👍
This has solved issues for me as well. Thanks for posting your fix.
I don't understand... what element do you have that's triggering the hover? I didn't see the attributes to trigger it. I mean, with just that markup, it shouldn't work at all.
Hi - I assume @aamjsadiq is referring to code within a Nav <li>, I have a similar scenario and his fix solved the intermittent hover issues for me.
Hi @CWSpear ,
Sorry for posting a dummy code.
The Actual code looks somewhat similar to below.
<a href="#" data-toggle="dropdown" data-delay="10" data-hover="dropdown" data-close-others="true" class="main">
<span class="icon-home"></span>
Text For Link
</a>
The issue happens when your mouse hover target is actually the span , as per existing code it checks whether the target is <a>
, but the fix checks for any child elements inside the<a>
as well.
+1
We also needed this tweak, thanks!
Exactly same issue, and this worked fine. Thanks.
+1 it has to be in the main branch
@aamjsadiq can you provide a PR for this making it easier for @CWSpear to adopt it?
@aamjsadiq thank you for this patch.
Why is this issue still open?
I guess a Pull Request would make it easier for the maintainer to merge...