在点击li触发时li切换展示 隐藏-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

在点击li触发时li切换展示 隐藏

小旋风柴进 2016-03-26 11:53:24 1402

重新说一下需求 就是给原来的无序列表后面增加一个分类显示的功能 ——我的想法是点击li使具有和li的value同data-option的元素进行显示,不知道怎么实现

先说需求 本来我是做了一个下拉的列表 现在只有两个数据 可能就两个li,然后有人说以后可能会有很多个数据 ,要做一个分类 ,我想了想 就在后面追加了一个ul ul里面包含的分类类别的li,现在缺一个点击后面的类别来时前面属于不同类的li 切换显示状态的功能,
数据格式 大概是

data:{jsonData:[{name:"balalabala",url:"balalla",directory:"somestring"},.....],direectrry:[string1,string2,.....]}
我能想到的方法就给前面的li下增加data-option 然后点击的时候使符合属性的显示 不符合的隐藏,但是具有同样data-option 的元素不止一个,所以不知道具体是实现应该怎么写,因为之前只写过 点击是单一元素切换到显示其他元素切换到隐藏的功能能 $(selector).show().siblings().hide()不知道能满足要求不

var   html = "";
html +='<span>.......</span>';
html = '<ul class="selectlist li">';
for(var i = 0 ; i < jsonData.length; i ++){
    html += '<li data-id="'+i+'_'+jsonData[i].url+'">jsonData[i].name</li>';
}
html+='</ul>';
html += '<ul class="selectlist ">';
for(var j = 0 ; j < directory.length;j++){
html +='<li>'+directory[i]+'</li>'
}
html +='</ul>'



$(selector).html(html);
数据格式
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:16:01
    
    $('selector[data-option=foo]').each(function(idx,ele){
        $('selector[data-option]').hide()//隐藏所有选项
        $(ele).show()//显示满足的
    })
    0 0
大数据
使用钉钉扫一扫加入圈子
+ 订阅

大数据计算实践乐园,近距离学习前沿技术

推荐文章
相似问题