【发布时间】：2019-04-18 02:30:29
【问题描述】：
我正在为我拥有的每个事件（节点）创建一个手风琴面板。我能够创建手风琴面板，但我只能折叠/展开第一个面板。任何帮助将不胜感激。我正在使用一些引导程序和一些我自己的丑陋 css。我相信一些引导样式表阻止我创建自己的 css 样式表，这就是我目前将 css 添加到单个标签的原因（临时）。
xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="FavoriteEvents.xsl"?>
<all>
<Spark_Dev_Apps_>
<Date>11/21/2018</Date>
<Description>descriptions</Description>
<Document>spark.txt</Document>
<Image>sparkdev.png</Image>
<Location>PG6116</Location>
<RSVP_link>sparkdev.com</RSVP_link>
<Sponsor>Spark Dev</Sponsor>
<Time>8pm</Time>
<Type>Mobile App</Type>
</Spark_Dev_Apps_>
<CTF>
<Date>11/23/2018</Date>
<Description>description</Description>
<Document>ctf.txt</Document>
<Image>ctf.png</Image>
<Location>PG5</Location>
<RSVP_link>fiu.com/hacks</RSVP_link>
<Sponsor>Moreno Hacks</Sponsor>
<Time>8pm</Time>
<Type>Cyber Security</Type>
</CTF>
<Unity_for_Advanced>
<Date>11/23/2018</Date>
<Description>Description text</Description>
<Document>unityDoc.txt</Document>
<Image>unity.png</Image>
<Location>PG6 105</Location>
<Sponsor>Unity</Sponsor>
<Time>3pm</Time>
<Type>Game Dev</Type>
<Website>www.unity.com</Website>
</Unity_for_Advanced>
<Big_O_for_Beginners>
<Date>11/24/2018</Date>
<Description>Description text</Description>
<Document>BigODoc.txt</Document>
<Image>BigO.png</Image>
<Location>PG6 105</Location>
<Sponsor>Facebook</Sponsor>
<Time>5pm</Time>
<Type>Database</Type>
<Website>www.facebook.com</Website>
</Big_O_for_Beginners>
<Smash_Bros_Tournament>
<Date>11/25/2018</Date>
<Description>Fun stuffffff</Description>
<Document>upe.txt</Document>
<Image>upe.png</Image>
<Location>PG6 116</Location>
<RSVP_link>Upe.com</RSVP_link>
<Sponsor>UPE</Sponsor>
<Time>7pm</Time>
<Type>Game Dev</Type>
</Smash_Bros_Tournament>
<JR_Code_Academy>
<Date>11/27/2018</Date>
<Description>Description text</Description>
<Document>UPEDoc.txt</Document>
<Image>upetutors.png</Image>
<Location>Braddock SR High School</Location>
<Sponsor>UPE</Sponsor>
<Time>12pm</Time>
<Type>Teach Code</Type>
<Website>www.UPE.com</Website>
</JR_Code_Academy>
<Advanced_SQL>
<Date>11/29/2018</Date>
<Description>Description text</Description>
<Document>BigODoc.txt</Document>
<Image>BigO.png</Image>
<Location>PG6 105</Location>
<Sponsor>UPE</Sponsor>
<Time>5pm</Time>
<Type>Database</Type>
<Website>www.facebook.com</Website>
</Advanced_SQL>
<Robot_Wars>
<Date>12/03/2018</Date>
<Description>Description text</Description>
<Document>RobotDoc.txt</Document>
<Image>robots.png</Image>
<Location>PG6 106</Location>
<Sponsor>UPE</Sponsor>
<Time>2pm</Time>
<Type>Robotics</Type>
<Website>www.robotwars.com</Website>
</Robot_Wars>
<Wireshark_for_Beginners>
<Date>12/05/2018</Date>
<Description>Description text</Description>
<Document>wiresharkDoc.txt</Document>
<Image>wireshark.png</Image>
<Location>ECS 243</Location>
<Sponsor>Wireshark</Sponsor>
<Time>2pm</Time>
<Type>Networking</Type>
<Website>www.Wireshark.com</Website>
</Wireshark_for_Beginners>
<VR_Hacks>
<Date>12/05/2018</Date>
<Description>Description text</Description>
<Document>oculusriftDoc.txt</Document>
<Image>oculusrift.png</Image>
<Location>PG6 106</Location>
<Sponsor>Oculus Rift</Sponsor>
<Time>1pm</Time>
<Type>Alt Reality</Type>
<Website>www.oculusrift.com</Website>
</VR_Hacks>
<HTML_5_Tips___Tricks>
<Date>12/12/2018</Date>
<Description>Description text</Description>
<Document>web.txt</Document>
<Image>web.png</Image>
<Location>ECS 237</Location>
<Sponsor>FIU/</Sponsor>
<Time>4pm</Time>
<Type>Web Dev</Type>
<Website>www.fiu.com/web</Website>
</HTML_5_Tips___Tricks>
<Big_Network_Management_Easy>
<Date>12/12/2018</Date>
<Description>Description text</Description>
<Document>network.txt</Document>
<Image>networking.png</Image>
<Location>ECS 237</Location>
<Sponsor>FIU/Johnson</Sponsor>
<Time>4pm</Time>
<Type>Networking</Type>
<Website>www.fiu.com/networking</Website>
</Big_Network_Management_Easy>
<Code_for_Kids>
<Date>12/15/2018</Date>
<Description>Description text</Description>
<Document>UPEDoc.txt</Document>
<Image>upetutors.png</Image>
<Location>Jack Gordon Elementary</Location>
<Sponsor>UPE</Sponsor>
<Time>12pm</Time>
<Type>Teach Code</Type>
<Website>www.UPE.com</Website>
</Code_for_Kids>
<Android_App_Dev>
<Date>12/17/2018</Date>
<Description>Description text</Description>
<Document>androidDoc.txt</Document>
<Image>androidapp.png</Image>
<Location>PG6 105</Location>
<Sponsor>Android</Sponsor>
<Time>2pm</Time>
<Type>Mobile App</Type>
<Website>www.android.com/students</Website>
</Android_App_Dev>
<iOS_App_Dev>
<Date>12/28/2018</Date>
<Description>Description text</Description>
<Document>appleDoc.txt</Document>
<Image>iOSapp.png</Image>
<Location>PG6 106</Location>
<Sponsor>Apple</Sponsor>
<Time>5pm</Time>
<Type>Mobile App</Type>
<Website>www.apple.com/students</Website>
</iOS_App_Dev>
</all>
xsl
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>Impulse</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="font-family: 'Poiret One', cursive; background-image: url(png/BG01dark.jpg);
background-size: cover; background-position: center; background-repeat: none; background-attachment: fixed;">
<div class="container">
<center><font style="color: white; font-size: 50px; text-shadow: 2px 2px 3px #000000;">
Impulse</font></center>
<center><p><font style="color: white; font-size: 20px; text-shadow: 1px 1px 1px #000000;">
Your friendly computer science event organizer</font></p></center>
<div class="panel-group" id="accordion">
<xsl:for-each select="all/*">
<div class="panel panel-default" style="background: rgba(255,255,255.75);" >
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">
<xsl:if test="Type = 'Careers'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid green; border-radius: 10px; padding: 7px;"
src="png/career.png" alt="Careers">Careers</img>
</xsl:if>
<xsl:if test="Type = 'Database'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid blue; border-radius: 10px; padding: 7px;"
src="png/database.png" alt="Database">Database</img>
</xsl:if>
<xsl:if test="Type = 'Game Dev'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid red; border-radius: 10px; padding: 7px;"
src="png/gamepad.png" alt="Game Development">Game Dev</img>
</xsl:if>
<xsl:if test="Type = 'Mobile App'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid purple; border-radius: 10px; padding: 5px;"
src="png/mobile.png" alt="Mobile Development">Mobile Dev</img>
</xsl:if>
<xsl:if test="Type = 'Networking'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid yellow; border-radius: 10px; padding: 7px;"
src="png/networking.png" alt="Networking">Networking</img>
</xsl:if>
<xsl:if test="Type = 'Robotics'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #FF6D14; border-radius: 10px; padding: 7px;"
src="png/robot.png" alt="Robotics">Robotics</img>
</xsl:if>
<xsl:if test="Type = 'Cyber Security'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid aqua; border-radius: 10px; padding: 7px;"
src="png/security.png" alt="Cyber Security">Cyber Security</img>
</xsl:if>
<xsl:if test="Type = 'Teach Code'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #FFB34C; border-radius: 10px; padding: 7px;"
src="png/teach.png" alt="Teach Code">Teach Code</img>
</xsl:if>
<xsl:if test="Type = 'Alt Reality'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #8D301D; border-radius: 10px; padding: 7px;"
src="png/vr.png" alt="Alternate Reality">Alt Reality</img>
</xsl:if>
<xsl:if test="Type = 'Web Dev'">
<img style="background: rgba(255,255,255.75); width:45px; height:45px;
border: 3px solid #35405A; border-radius: 10px; padding: 7px;"
src="png/webdev.png" alt="Website Development">Web Dev</img>
</xsl:if >
<object hspace="20"><xsl:value-of select="name()"/></object>
<object align="right"><xsl:value-of select="Date"/></object>
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Event details go here
</div>
</div>
</div>
</xsl:for-each>
</div>
</div>
</body>
</html>
</xsl:template>
【问题讨论】：