jQuery中处理指针移过去时的列表标题显示与隐藏

最新推荐文章于 2022-05-11 00:00:00 发布

这条路黑到底

最新推荐文章于 2022-05-11 00:00:00 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/chaplinlong/article/details/51210109

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这里主要用到了hover，index（）函数，eq等基本过滤选择器。先看body部分的代码：

<body>

 <div id="fq">
    <div class="one">
        <div class="top"><span class="iocn"></span>什么是人身保险？</div>
        <div class="content">
            <img src="images/gd.jpg" alt="" /><br/>
           <p>人身保险是人的寿命和身体为...... </p>
        </div>
    </div>
    <div class="one">
        <div class="top"><span class="iocn"></span>什么是保险合同？</div>
        <div class="content">
            <img src="images/gd.jpg" alt="" /><br/>
           <p>保险合同是......</p>
        </div>
    </div>
     <div class="one">
        <div class="top"><span class="iocn"></span>什么是保险人？</div>
        <div class="content">
            <img src="images/gd.jpg"  alt=""/><br/>
           <p>保险人是......</p>
        </div>
    </div>
     <div class="one">
        <div class="top"><span class="iocn"></span>什么是投保人？</div>
        <div class="content">
            <img src="images/gd.jpg" alt="" /><br/>
           <p>投保人是......</p>
        </div>
    </div>
 </div>

</body>
</html>

样式部分：

<style type="text/css" >
.one{ 
    width:600px;
    font-size:12px;
}
.one .top{
    background-color:#fff; 
    height:33px;
    line-height:33px;
    width:700px;
    padding-left:28px;
    color:#168750;
    font-weight:bold;
    margin-top:10px;
}
.iocn{
    display:block; 
    width:14px;
    height:14px;
    background-image:url(images/+.jpg); 
    background-repeat:no-repeat; 
    float:left;
    margin:10px 0px 0px 3px;
    padding-right:10px;
}
.one  span.jian{
    background-image:url(images/-.jpg);

}
.one  span.jia{
    background-image:url(images/+.jpg);

}

.one  div.bgreen{ 
    background-image:url(images/bg.jpg); 
}
div.content{
    display:none;
    padding:5px;
    width:716px;
    border:1px solid #D9EFED;
}
.newstyle{ background:green;
            border-radius:5px;}
</style>

看一下需求：鼠标移过时，背景改变。单击列表时，显示相关文字。同时文字前的加减号改变：

$(document).ready(function(){
        $(".one").hover(function() {
            $(".top").eq($(this).index()).addClass("bgreen");
        },function() {
            $(".top").eq($(this).index()).removeClass("bgreen");
        });

var i=0;
        $(".one").click(function() {
            if(i==0){
                 $(".iocn").eq($(this).index()).removeClass("jian");
                 $(".content").eq($(this).index()).hide("slow");
                 $(".iocn").eq($(this).index()).addClass("jia");
                 i=1;
            }else  {
                $(".iocn").eq($(this).index()).removeClass("jia");
                 $(".content").eq($(this).index()).show(1500);
                 $(".iocn").eq($(this).index()).addClass("jian");
                 i=0;
            }

        });