I have a nested list representing categories and subcategories where the depth is unknown, it is created with data from a database.
What I am trying to do is to display a little image, a cross, next the category being hovered.
Problem is I can't reliably differentiate if it is an ancestor li element or a child which is being hovered because the "mousein" event isn't fired again when I go back to a parent category from a subcategory.
My current code is :
Html example
<ol class="innerCenter" id="bdc_categories">
<form action="?function=base_connaissances&onglet=2" method="POST" id="" name="">
<li>Hardware<img class="hidden" src="image/supp.png">
<ol>
<li>Ecran<img class="hidden" src="image/supp.png">
<ol>
<li>Alimentation<img class="hidden" src="image/supp.png"></li>
<li>Dalle<img class="hidden" src="image/supp.png"></li>
</ol>
</li>
<li>Disque dur<img class="hidden" src="image/supp.png"></li>
</ol>
</li>
<li>Test<img class="hidden" src="image/supp.png"></li>
<li>Test<img class="hidden" src="image/supp.png"></li>
<li>Test<img class="hidden" src="image/supp.png"></li>
<li>Ajouter une catégorie...<img class="hidden" src="image/supp.png"></li>
<li>Software<img class="hidden" src="image/supp.png">
<ol>
<li>Excel<img class="hidden" src="image/supp.png"></li>
</ol>
</li>
</form>
<form action="?function=base_connaissances&onglet=2" method="POST" id="" name="">
<input type="hidden" value="NULL" name="idCategSup">
<input type="text" value="Ajouter une catégorie..." name="lib_categ">
<input type="submit" value="Ok">
</form>
</ol>
Javascript
$("#bdc_categories").on('mouseleave', '', '', function(){$("#bdc_categories li").removeClass('is-hover'); $("#bdc_categories li").children('img').css({"visibility": "hidden"});});
$("#bdc_categories li").hover(function (event) {
event.stopPropagation();
if($(event.target).is('li')){
$("#bdc_categories li").removeClass('is-hover');
$("#bdc_categories li").children('img').css({"visibility": "hidden"});
$(event.target).addClass('is-hover');
$(event.target).children('img').css({"visibility": "visible"});
var tar = $(event.target);
while ($(tar.parent('ol').parent('li')).length) {
tar = $(tar.parent('ol').parent('li'));
$(tar).addClass('is-hover');
//$(tar).children('img').css({"visibility": "hidden"});
}
}
}, function (event) {
event.stopPropagation();
$(event.target).removeClass('is-hover');
$("#bdc_categories li").not(".is-hover").children('img').css({"visibility": "hidden"});
$("#bdc_categories .is-hover").children('img').css({"visibility": "visible"});
$("#bdc_categories .is-hover").parent('ol').parent('li').children('img').css({"visibility": "hidden"});
}
It is almost working but I am sure there is a better way to achieve this? And there's still a little problem : if I go from a "Test" li to the Hardware li, the image doesn't appear...I think it's because the mousein event is fired on the ol element, even if I am not on a li...
Any help would be appreciated!
Aren't you missing a );
at the very end of your JS code? When I fix that and try this in JSFiddle, it works.
Is this not what you're looking for?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.