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

Question

重新说一下需求 就是给原来的无序列表后面增加一个分类显示的功能 ——我的想法是点击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);

`

Answer 1

描述有点不太清楚，是不是同类的data-option是一样的。

$('selector[data-option=foo]').each(function(idx,ele){
    $('selector[data-option]').hide()//隐藏所有选项
    $(ele).show()//显示满足的
})