Question

我有这个简单的无序列表

<ul>
    <li>
        <p>Entertainment</p>
        <ul>
            <li><p>Lady GAGA</p></li>
            <li><p>Lady GAGA</p></li>
            <li><p>Lady GAGA</p></li>
            <li><p>Lady GAGA</p></li>
        </ul>
    </li>

    <li>
        <p>Fasion</p>
    </li>

    <li>
        <p>Animals</p>
    </li>
</ul>

我希望其中<li>内的<ul>会自动获得特殊的类/样式，因此如果内容（ul）将被移动或删除，特殊类也已从父<li>中删除。

如果可以用css或sass完成，我会很高兴，但在ng-class它也没关系。

感谢。

Answer 1

您可以使用directive。

进行操作

angular.module('myModule').directive('li', function() {
    return {
        restrict: 'E',
        link: function(scope, element) {
            scope.$watch(function() {
                return $(element).find("ul").length;
            }, function(newValue) {
                if(newValue === 0) {
                    element.removeClass("hasSubList");
                }
                else {
                    element.addClass("hasSubList");
                }
            });
        }
    };
});

Answer 2

为了能够检查内容是否已经改变，你需要通过这样的javascript来做到这一点

$("#Id_of_the_ul").change(function(){
    // this is executed when any change occurs in the content of the <ul>
    //an if statement here for the change you want to detect

    $(this).parent().addClass("YourClass");
    // or
    $(this).parent().removeClass("YourClass");
})

Answer 3

如果您只想在<ul>内的<li>元素上应用属性。你可以简单地使用css组合器，如： -

li＆gt; ul { //申请财产 }

此时如果ul中不存在li，则ul上不会应用任何属性。

如果你想根据内容添加和删除样式类，那么你需要JavaScript @ Zoheiry为此提供了很好的解决方案。

如果您使用的是Angularjs，那么为什么不使用JavaScript？

根据他的内容更改父li项目类

3 个答案: