Question

我有以下代码：

$(document).ready(function() {


  // Manage sidebar category display
  jQuery("#categories > ul > li.cat-item").each(function(){
    var item;
    if ( jQuery(this).has("ul").length ) {   
      item = jQuery("<span class='plus'>+</span>").click(function(e){
        jQuery(this)
          .text( jQuery(this).text() === "+" ? "-" : "+" )
          .parent().next().toggle();
        return false;
      });

      jQuery(this).find(".children").hide();
    } else {
      item = jQuery("<span class='plus'>&nbsp;</span>");
    }

    jQuery(this).children("a").prepend( item );
  });

});

这为我的类别创建了一种切换系统。但它只能在2级深度工作，我需要它做的是无限级别的工作。

HTML：

<li id="categories">
    <ul>
        <li class="cat-item"><a href="#">Link</a>
            <ul>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
            </ul>
        </li>
        <li class="cat-item"><a href="#">Link</a>
            <ul>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a>
                    <ul>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

Answer 1

您的顶级选择器是具体的：

jQuery("#categories li.cat-item").each(function(){
    var item = jQuery("<span>").addClass('plus'),
        that = jQuery(this);

    if ( that.has("ul").length ) {   
        item.click(function(e){
            var self = jQuery(this);
            self.text( self.text() === "+" ? "-" : "+" )
                .parent().next().toggle();
            e.preventDefault();
        }).text('+');

        that.find(".children").hide();
    }

    that.children("a").prepend( item );
});

我也将其更改为缓存$（this）

jQuery切换帮助

1 个答案: