基金会响应式手风琴标签
我正在使用Foundation中的Responsive Accordion Tabs，我希望Tabs垂直浮动到左边大，中小转换为手风琴。对于那部分我有它的工作，但当标签变为med / small手风琴时，面板都会在底部结束。我发现当我删除＆＃34;垂直＆＃34;手风琴工作的标签中的类/正确堆叠面板。 这有什么黑客/解决方案吗？
HERE＆＃39;我的代码：
<!-----------------------------TABACCORDION------------------------------>
<div class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
<div class="tabs-panel is-active" id="panel1">
<div class="small-12 medium-2 large-2 columns">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active tabOnebkgd btn1" style="text-align:left"><a href="#panel1v" aria-selected="true" class="TabText">FIND A JOB</a></li>
<li class="tabs-title tabTwoBkgd btn2"><a href="#panel2v" class="TabText" style="text-align:left">FIND TALENT</a></li>
<li class="tabs-title tabThreeBkgd btn3"><a href="#panel3v" class="TabText" style="text-align:left">FOR EMPLOYEES</a></li>
</ul>
</div>
<div class="small-12 medium-10 large-10 columns">
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
<div class="tabs-panel is-active" id="panel1v">
<div class="hide-for-small medium-5 large-5 columns">
<ul class="vertical dropdown menu kickOutMenu hide-for-small-only" data-dropdown-menu style="max-width:220px !important; text-align:left;">
<li><a href="../why-work-with-celebrity.aspx" class="kickOutLinks">WHY WORK WITH CELEBRITY</a></li>
<li><a href="../areas-of-specialization-employee.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
<li><a href="../career-options.aspx" class="kickOutLinks">CAREEER OPTIONS</a></li>
<li><a href="../our-process-employee.aspx" class="kickOutLinks">OUR PROCESS</a></li>
<li><a href="../benefits.aspx" class="kickOutLinks">BENEFITS</a></li>
<li><a href="../candidate-newsletter.aspx" class="kickOutLinks">OUTSTANDING OPPORTUNITIES NEWSLETTER</a></li>
</ul>
</div>
<!-- Find A Job Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<p class="RedHeader" align="center">Find Jobs</p>
<div id="Formcontent_main" class="BodyCopy" >
<!-- start job search -->
<div id="jobsearchdiv" style="display: none;">
<input type="text" id="txtQuery" placeholder="Job Title or Keyword" />
<input type="text" id="txtLocation" placeholder="City, State or Zipcode" />
<button type="button" class="button" onclick="jobSearch()">SEARCH</button>
<label id="errorControl" name="errorControl"></label>
</div>
<div id="jobsearchnotfound" style="display: none; color: inherit; text-align: center;">
Oops! Something went wrong.
<br />
Job Search is currently unavailable.<br /><br />
</div>
<!-- end job search -->
</div>
</div>
</div>
</div>
<!-- end of Find A Job form -->
<!---------------------RED Icons---------------------------->
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns" style="margin-top:120px;">
<div class="hide-for-small medium-2 large-2 columns float-right"><a href="/Apply-Online.aspx" target="_blank"><img src="../img/design/images/aol-red.png" alt="Apply Online" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"><a href="../job-search-tips.aspx"><img src="../img/design/images/jst-red.png" alt="Job Search Tips" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"><a href="../interview-tips.aspx"><img src="../img/design/images/interview-red.png" alt="Interview Tips" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"><a href="../resume-recommendations.aspx"><img src="../img/design/images/resume-red.png" alt="Resume Recommendations" class="show-for-large-up"></a>
</div>
</div>
</div>
<!---------------------RED Icons---------------------------->`enter code here`
</div>
<div class="tabs-panel" id="panel2v">
<div class="hide-for-small medium-5 large-5 columns">
<ul class="vertical dropdown menu kickOutMenu2 hide-for-small-only" data-dropdown-menu style="max-width: 350px; text-align:left;">
<li><a href="../why-partner-with-celebrity.aspx" class="kickOutLinks">WHY PARTNER WITH CELEBRITY</a></li>
<li><a href="../areas-of-specialization-client.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
<li><a href="../staffing-solutions.aspx" class="kickOutLinks">STAFFING SOLUTIONS</a></li>
<li><a href="../our-process-client.aspx" class="kickOutLinks">OUR PROCESS</a></li>
<li><a href="../request-talent.aspx" class="kickOutLinks">REQUEST TALENT</a></li>
<li><a href="../online-timecard-approval.aspx" class="kickOutLinks">ONLINE TIMECARD APPROVAL</a></li>
<li><a href="../client-newsletter.aspx" class="kickOutLinks">TOP TALENT NEWSLETTER</a></li>
</ul>
</div>
<!-- Find Talent Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<div class="OrangeHeader" id="FindTalent" style="padding-bottom:5px;">Find Talent</div>
<p class="FormText"><strong>Have a need for an employee?</strong> Search our network of exceptional candidates or contact us to learn about additional candidates not featured online.</p>
<div id="staffSearch">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"/>
<p>
<Aureus:CandidateSearchBox runat="server" ID="candidateSearchBox1" ButtonText="BEGIN STAFF SEARCH" CssClass="Search ButtonOrange" RedirectUrl="~/Employers/Results.aspx?wb={0}&pos={1}" IsInitializeWithDivision="true" />
</p>
<p class="FormText">Or, <a href="/request-talent.aspx" class="redBodyLink">submit your staffing request online</a> and one of our professionals will start working on your search right away.</p>
</div>
</div>
</div>
</div>
<!-- end of Find Talent Form -->
<!---------------------Orange Icons---------------------------->
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-35px;">
<div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employment-trends.aspx"><img src="../img/design/images/et-orange.png" alt="Employment Trends" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../interview-tips-client.aspx"><img src="../img/design/images/it-orange.png" alt="Interview Tips" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../professional-affiliations.aspx"><img src="../img/design/images/pa-orange.png" alt="Professional Affiliations" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../our-clients-say-it-best.aspx"><img src="../img/design/images/ocsib-orange.png" alt="Our Clients Say It Best" class="show-for-large-up"></a>
</div>
</div>
</div>
<!---------------------orange Icons---------------------------->
</div>
<div class="tabs-panel" id="panel3v">
<div class="hide-for-small medium-5 large-5 columns">
<ul class="vertical dropdown menu kickOutMenu3 hide-for-small-only" data-dropdown-menu style="max-width: 450px; text-align:left">
<li><a href="../starting-your-assignment.aspx" class="kickOutLinks">STARTING YOUR ASSIGNMENT</a></li>
<li><a href="../pay-benefits.aspx" class="kickOutLinks">PAY & BENEFITS</a></li>
<li><a href="../online-timecard-submittal.aspx" class="kickOutLinks">ONLINE TIMECARD SUBMITTAL</a></li>
<li><a href="../employee-handbook.aspx" class="kickOutLinks">EMPLOYEE HANDBOOK</a></li>
<li><a href="../I-9.aspx" class="kickOutLinks">COMPLETING YOUR I-9</a></li>
</ul>
</div>
<!-- Login form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<div class="PurpleHeader" style="padding-bottom:5px;">Employee Login</div>
<p class="FormText"><strong>Current employee?</strong> Log in to access the employee portal to access pay & benefits information or view the employee handbook.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny" >LOGIN</button>
</p>
<p class="FormText">Forgot your User ID and/or Password? <a href="/Login.aspx" target="_blank" class="redBodyLink">Click here</a></p>
<hr />
<p class="FormText">Not an employee? Register today and one of our professionals will contact you regarding career opportunities.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny">NEW USER REGISTRATION</button>
</p>
</div>
</div>
<!-- end of Login form -->
<!---------------------Purple Icons---------------------------->
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-115px; z-index:1000;">
<div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../in-the-community.aspx"><img src="../img/design/images/itc-purple.png" alt="In The Community" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../safety-tip.aspx"><img src="../img/design/images/st-purple.png" alt="Safety Tips" class="show-for-large-up"></a>
</div>
<div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employee-of-the-quarter.aspx"><img src="../img/design/images/eoq-purple.png" alt="Employee Of The Quarter" class="show-for-large-up"></a>
</div>
</div>
</div>
<!---------------------Purple Icons---------------------------->
</div>
</div>
</div><!----------Tabs-content verticle----------------->
</div><!--------medium-10 columns---------------------->
</div><!---------Tabs-content---------------------------->
</div>
<!--------------------------TABACCORDION-----------------------------------
- ＆GT;