Question

我有这个html和css代码，我已经在css中完成显示和隐藏，我希望在jquery中完成点击事件和左右填充，第二级和第三级unroderd列表必须增加它的父，如果我再添加一个无序列表，那么它必须动态添加一些填充，我不应该为此添加任何css。

<ul class="delete">
                <li><a>1</a>
                    <ul>
                        <li><a>1a</a></li>
                        <li><a>1b</a></li>
                        <li><a>1c</a></li>
                        <li><a>1d</a></li>
                    </ul>
                </li>
                <li><a>2</a>
                    <ul>
                        <li><a>2a</a></li>
                        <li><a>2b</a></li>
                        <li><a>2c</a></li>
                        <li><a>2d</a></li>
                    </ul>
                </li>
                <li><a>3</a>
                    <ul>
                        <li><a>3a</a>
                            <ul>
                                <li><a>3aa</a>
                                    <ul>
                                        <li><a>3aaa</a></li>
                                        <li><a>3aab</a></li>
                                        <li><a>3aac</a></li>
                                        <li><a>3aad</a></li>
                                    </ul>
                                </li>
                                <li><a>3ab</a></li>
                                <li><a>3ac</a></li>
                                <li><a>3ad</a></li>
                            </ul>
                        </li>
                        <li><a>3b</a></li>
                        <li><a>3c</a></li>
                        <li><a>3d</a></li>
                    </ul>
                </li>
                <li><a>4</a></li>                   
            </ul>

.delete li a:hover {
background-color: #008000;
color: #FFFFFF;
}

ul {
  list-style:none;
 padding:0px;
 }

.delete {
   width: 300px;
 }

.delete > li {
    margin: 15px 0px;
  }

.delete > li > a {
   display: block;
   padding: 0px 10px;
   border: 2px solid #000000;
   }

.delete > li > ul > li > a {
   display: block;
   padding: 0px 20px;
   border: 2px solid #000000;
  }

.delete > li > ul > li > ul > li > a {
   display: block;
   padding: 0px 40px;
   border: 2px solid #000000;
  }

.delete > li > ul > li > ul > li > ul > li > a{
    display: block;
    padding: 0px 60px;
    border: 2px solid #000000;
  }

.delete  li ul {
   display: none;
  }

.delete li:hover > ul{
   display: block;
  }

这是Fiddle

Answer 1

使用插件完成任务可能会更容易。用户@PawanLakhara建议 jQSimpleMenu。

另一种可能的解决方案是使用递归函数，该函数迭代列表项并在每个锚元素上设置css：

function iterateItems($context) {
    $context.children('ul').each(function(){
        $(this).children('li').each(function(){
            var $this = $(this);
            var p = $context.data('li-padding');
            $this.data('li-padding', ((!p) ? 10 : p + 10));
            $this.children('a:first').css({
                'display': 'block',
                'padding': '0px ' + $this.data('li-padding') + 'px',
                'border': '2px solid #000000'
            });            
            iterateItems($(this));
        }); 
    });
}


iterateItems($('body'));

jsFiddle

Answer 2

<强> Live result here
jQuery代码

$('.delete li a').click(function (e) {
    $('.delete .innerList').not($(this).parents('.innerList')).slideUp();
    $(this).next('.innerList').slideToggle();
    e.stopPropagation();
});

列表项大小和填充将由您自己管理，您不必担心它。因为我们已经限制了父级ul的宽度

.delete {
    width: 300px;
}

结果看起来像这样
result

Answer 3

我理解这个问题有两个部分：

在点击事件
在不必添加额外的css

之前的答案似乎与我的理解最接近。假设您希望项目保持扩展，除非特别点击关闭，您可以改为使用它：

$('.delete').on('click', 'li', function(event) {
    event.stopPropagation();
    $(this).children('ul').toggleClass('expandnext');
});

并将您的CSS更改为：

.delete li a:hover {
    background-color: #008000;
    color: #FFFFFF;
}
ul {
    list-style:none;
}
.delete {
    width: 300px;
}
.delete li {
    margin: 15px 0px;
}
.delete li li {
    margin: 10px 0px;
}
.delete li a {
    display: block;
    border: 2px solid #000000;
}
.delete li ul {
    display: none;
}
.delete ul.expandnext {
  display: block;
}

编辑：受到Bhavik关于处理缩进的观点的启发。

Edit to your fiddle

jquery中的多级无序列表层次结构

3 个答案: