javascript - 在点击li触发时li切换展示 隐藏
天蓬老师
天蓬老师 2017-04-10 15:40:27
[JavaScript讨论组]

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

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

$('selector[data-option=foo]').each(function(idx,ele){
    $('selector[data-option]').hide()//隐藏所有选项
    $(ele).show()//显示满足的
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号