首页 > web前端 > js教程 > 【jquery】结合class选择器、next、prev方法实现相邻的节点展开隐藏效果

【jquery】结合class选择器、next、prev方法实现相邻的节点展开隐藏效果

巴扎黑
发布: 2017-06-22 10:00:36
原创
1274 人浏览过

在页面效果中,有时候我们程序循环出来的列不能加上ID属性,因为可能有列表可能会循环出多个相同的ID,这样就不能使用JqueryID选择器,这时候 我们可以使用Class选择器,

同时我们也可能需求是对此节点元素的操作只局限于当前的p(或table中),我们看代码:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery效果title>
    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript">script>
    <script type="text/javascript">
        
//展开隐藏层
        $(document).ready(function () {
            $(
".part").click(function () {
                
var hideP = $(this).next();
                
if (hideP.css('display'== 'none') {
                    hideP.show();
                    $(
this).hide();
                }
                
else {
                    hideP.hide();
                    $(
this).show();
                }
            });
            $(
".all").click(function () {
                
var hideP = $(this).prev();
                
if (hideP.css('display'== 'none') {
                    hideP.show();
                    $(
this).hide();
                }
                
else {
                    hideP.hide();
                    $(
this).show();
                }
            });
        });  
script>
head>
<body>
    
    <p class='classA'>
        <p class="part">内容1p>
        <p class="all" style="display:none">内容1,哈哈哈,我展开了,这里是更多内容哈p>
    p>
    <p class='classA'>
        <p class="part">内容2p>
        <p class="all" style="display:none">内容2,哈哈哈,我展开了,这里是更多内容哈p>
    p>
    <p class='classA'>
        <p class="part">内容3p>
        <p class="all" style="display:none">内容3,哈哈哈,我展开了,这里是更多内容哈p>
    p>
body>
html> 

也就是说我想展开 classA处的隐藏内容,同时不影响到其他相同的classA处的内容。其实这里重点也就是jquery next、prev方法的使用,当然还可以用于其他场合。

 

以上是【jquery】结合class选择器、next、prev方法实现相邻的节点展开隐藏效果的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板