html中ul列表的折叠,jq 实现ul列表折叠下拉遇到的问题

1.ul li 布局,实现li换行：

ul {

display: block;

list-style: none;

}

li {

float: left;

list-style: none;

margin-left: 10px;

}

效果例如图：

我这是鼠标移动到子目录4、、5、6那行一级目录时，悬浮显示的二级子目录。

至于放几个换行，看你自己设置的ul宽度和li里面的文字宽度了，自己定。

2.第一次点击的时候，进行数据请求，给ul设置一个.active {箭头旋转朝上的样式}，，代表是展开的状态，第二点击时，判断有无.active类，有的话，把.active去掉，不进行数据请求操作即可；思路是这样子。

若数据没变化的话，其实不必每次点击的时候请求数据，初始化请求后，可以让dom隐藏显示来控制，类似.active思路，写个.hide{ display:none}。

3.多个列表 公用一个方法 ，能把不同的地方提取为参数即可，其他相同之处封装为一个方法，在不同的地方调用时传参数即可，思路是这样。

不知道你想做什么，随便写个例子吧：

这是一个列表1

这是一个列表2

listData('.list',"./data/permisson.json",''); //调用

//折叠列表事件

$('.fa-chevron-down.fa1').click(function () {

if($(this).hasClass('active')){

//已存在.active，即是第二次点击要收起，不请求数据

$(this).removeClass('active');

} else {

//不存在.active，即是第一次点击要展开，请求数据

console.log(123);

$(this).toggleClass('open');

listData('.list1',"./data/permisson.json",'');

$(this).addClass('active');

}

});

$('.fa-chevron-down.fa2').click(function () {

//逻辑随意，同上也可

console.log(123);

$(this).toggleClass('open');

listData('.list2',"xxx.json",'xxxx');

});

function listData(selector,url,data){

new AjaxRequest({

type: "get",

url: url,

param: data,

isShowLoader: true,

dataType: "",

callBack: function (res) {

var data = res.data;

for (var i = 0; i < data.length; i++) {

var html = '';

html += '

' + data[i].Name +

'(' +

'' +

data[i].leftNum +

'' +

'/' +

'' +

data[i].totalNum +

'' +

')' +

'

';

$(selector).append(html);

}

}

});

}