Question

我有一个嵌套列表，表示深度未知的类别和子类别，它是使用数据库中的数据创建的。

我要做的是显示一个小图像，一个十字架，下一个悬停的类别。

问题是，如果它是一个祖先的li元素或正在徘徊的孩子，我无法可靠地区分，因为＆＃34; mousein＆＃34;当我从子类别返回父类别时，事件不再被触发。

我目前的代码是：

Html示例

<ol class="innerCenter" id="bdc_categories">
    <form action="?function=base_connaissances&amp;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&amp;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"});

    }

它几乎可以工作，但我确信有更好的方法来实现这一目标吗？还有一个小问题：如果我从一个＆＃34;测试＆＃34; li对硬件li来说，图像没有出现......我认为这是因为mouse元素事件是在ol元素上触发的，即使我不在... ...

任何帮助将不胜感激！

Answer 1

你在JS代码的最后错过了);吗？当我修复它并在JSFiddle中尝试它时，它可以工作。

this不是您要找的东西吗？

悬停和嵌套列表：哪个元素正在悬停？

1 个答案: