>首页> IT >

jquery怎么实现点击元素相邻元素隐藏

时间:2022-03-25 18:22:56       来源:PHP中文网

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery实现点击元素,其相邻元素隐藏

实现方式:

使用click()函数给指定元素绑定点击事件,并设置处理函数

在处理函数中,使用next()和prev()函数获取相邻元素,并使用hide()函数将获取的元素隐藏

next():用来获取下一个同辈元素。

prev():用来获取上一个同辈元素。

实现代码:

<script src="js/jquery-1.10.2.min.js"></script><script>$(document).ready(function() {$("li.start").css({"color": "red","border": "2px solid red"});$("li.start").click(function() {$("li.start").next().hide();$("li.start").prev().hide();});});</script>
    ul (父节点)
  • li
  • li (类名为"star"的相邻元素)
  • 类名称为“star”的li元素
  • li (类名为"star"的相邻元素)
  • li

点击类名称为“star”的li元素,隐藏其相邻的两个元素

【推荐学习:jQuery视频教程、web前端视频】

以上就是jquery怎么实现点击元素相邻元素隐藏的详细内容,更多请关注php中文网其它相关文章!

关键词: 相关文章 视频教程