jquery FAQ问答显示隐藏当前列表

jquery问答显示隐藏当前列表

index.html

<div class="margin-t-40 customer-question" id="problem">
        <ul >
            <li><span class="customer-question-ico margin-r-20"></span>需要多长时间开立一个基本帐户?
                <span  class="fr customer-question-plus plus" ></span>
                <div  class="answer">1天左右就可以搞定</div>
            </li>
            <li>
                <span class="customer-question-ico margin-r-20"></span>为什么当尝试上传我的文件时,注册页面到期?
                <span  class="fr customer-question-plus plus" ></span>
                <div  class="answer ">你想多了,根本不会有这种情况</div>
            </li>
            <li>
                <span class="customer-question-ico margin-r-20"></span>我的资金存在BKL,安全吗?
                <span  class="fr customer-question-plus plus" ></span>
                <div  class="answer ">放心吧,绝对安全!</div>
            </li>
            <li><span class="customer-question-ico margin-r-20"></span>
                为什么当尝试上传我的文件时,注册页面到期?<span class="fr customer-question-plus plus" ></span>
                <div  class="answer">放心吧,以后不会有到期的!</div>
            </li>
            <li> <span class="customer-question-ico margin-r-20"></span>
                流册流程在三分之二步时停止,页面冻结,应该怎么做?<span class="fr customer-question-plus plus" ></span>
                <div  class="answer">继续注册,到成功为止!</div>
            </li>
            <li> <span class="customer-question-ico margin-r-20"></span>
                我的资金存在BKL,安全吗?<span class="fr customer-question-plus plus" ></span>
                <div  class="answer">请放心,我们有私保,绝对安全!</div>
            </li>

        </ul>
    </div>

index.js

//FAQ问答JQuery
$(function () {
    var npage=0;                                        //当前页初始值
    $('.plus').click(function () {              //+加号按钮单击事件
        if($('.plus').index(this)==npage){        //判断是否是当前页是执行下面的内空
            //点击是当前页时判断是加号还是减号(加号表示隐藏,减号表示显示)
            $(this).parent().find('.answer').toggle();  //点击的是当前页就来回显示隐藏切换
            if($(this).hasClass('customer-question-plus')){
                $(this).removeClass().addClass('fr plus customer-question-minus'); //把加号变成减号
            }else{
                $(this).removeClass().addClass('fr plus customer-question-plus');   //把减号变成加号
            }
        }else{ //不是当前页时
            $('.answer').hide(); //将所有的隐藏初始化
            $('.plus').removeClass().addClass('fr plus customer-question-plus');//将所有的变成+加号初始化
            $(this).parent().find('.answer').toggle();  //点击来回显示隐藏切换
            if($(this).hasClass('customer-question-plus')){
                $(this).removeClass().addClass('fr plus customer-question-minus');//把加号变成减号
            }else{
                $(this).removeClass().addClass('fr plus customer-question-plus');//把减号变成加号
            }
        }
        npage=$('.plus').index(this);//把当前点击过的索引赋给当前页索引变量
    });
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1 92
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,199评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,441评论 0 44
  • 为甚嚒要学习jQuery? 因为JS中有很多痛点: window.onload事件只能出现一次,如果出现多次,后面...
    magic_pill阅读 843评论 0 13