我想在我的网站上获得这种手风琴效果:
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>
有人可以帮我解决这个问题吗?提前谢谢你; - )