假如有N对<ul> <li>标签 如做到点击当前的ul隐藏当前li其它标签不变。如何用jquery来实现。
1、新建一个html文件，命名为test.html，在test.html文件内，使用ul标签、li标签创建一个列表，用于测试。
2、在test.html文件内，给ul标签设置一个id属性，用于获得ul对象。
3、在test.html文件内，创建一个button按钮，给button绑定onclick点击事件，当按钮被点击时，执行addBorder()函数。
4、在js标签内，创建addBorder()函数，在函数内，通过获得li标签对象，使用css()方法设置li对象的边框属性，设置为1px宽，实线，灰色的边框。
5、在浏览器打开test.html文件，点击按钮，查看实现的效果。
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。
2、在index.html中的<script>标签，输入jquery代码：
$('ul').click(function () {
$(this).find('li').hide();
});
3、浏览器运行index.html页面，此时点击第一个ul，其下属的li全部自动隐藏了。
<ul class="a">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="b">
<li></li>
<li></li>
<li></li>
</ul>
jq:
$("ul").click(function(){
$(this).find("li").hide();//点击哪个 就把哪个下边的li隐藏 $(this)就指的是你点击的ul
//当然 这样会导致 你点击一个就隐藏一个 到最后 没有显示的了
所以可以这样：
$("ul").find("li").show();
$(this).find("li").hide();//点哪个隐藏哪个 其他的都显示出来
});
为什么点击li标签也会隐藏li可不可以只点击ul的时候显示或隐藏li。点击li不会隐藏li呢？
因为li属于ul的下级标签 点击li就会出发ul的事件 你是想实现ul li自定义的下拉列表或者菜单栏么？
$("ul li").click(function(){
$(this).hide();
})
为什么点击li标签也会隐藏li可不可以只点击ul的时候显示或隐藏li。点击li不会隐藏li呢？
大哥，我不明白你神马意思。点击ul隐藏li。第一个问题是ul里面全是li。点击ul就是点击其中一个li呀。搞不懂你什么特殊布局。
$("ul").click(function(){
$(this).find("li").hide();//点击ul后隐藏ul下所有li
})
|
广告 您可能关注的内容 |
