手风琴打开/关闭箭头

时间:2015-09-18 23:44:34

标签: javascript jquery

我想在我的网站上获得这种手风琴效果:

http://bootsnipp.com/brojask/snippets/Q6zjv#comments

我已经直接将代码复制到我的代码中,但是脚本似乎没有工作,因为箭头不会从下到上发生变化。

这是我的代码:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="quienes_somos.aspx.cs" Inherits="xxxxxxxxxxx.acerca_de.quienes_somos" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
<script language="javascript"  type="text/javascript">

    $(document).on('show','.accordion', function (e) {
         //$('.accordion-heading i').toggleClass(' ');
         $(e.target).prev('.accordion-heading').addClass('accordion-opened');
    });

    $(document).on('hide','.accordion', function (e) {
        $(this).find('.accordion-heading').not($(e.target)).removeClass('accordion-opened');
        //$('.accordion-heading i').toggleClass('fa-chevron-right fa-chevron-down');
    });
</script>
<style>
.accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114"; 
    float: right;
}
.accordion-opened .accordion-toggle:after {   
    content: "\e113";    
}
</style>

<div class="container">
    <div class="row">
        <h2>Accordion with Open / Close Arrows</h2>
    </div>
</div>

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
</asp:Content>    

有人可以帮我解决这个问题吗?提前谢谢你; - )

0 个答案:

没有答案