javascript jQuery 手风琴 - 访问时打开的第一个选项卡

jQuery accordion - first tab open on visit

提问by TG90

I recently uploaded my personal portfolio site online (www.edwardmanson.com) and have been attempting to find out ways to keep the first tab in the accordion section (About Me) open when anyone visits the site.

我最近在网上上传了我的个人作品集网站 (www.edwardmanson.com)，并且一直在尝试寻找方法，当有人访问该网站时，手风琴部分（关于我）中的第一个标签保持打开状态。

$(document).ready(function() { 
$(".desc").hide();  
$("h3.open-close").click(function(){  
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");

$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
});

采纳答案by w00

It looks like you're not using the JQueryaccordion but a custom build accordion. My advise it to change it to the JQUeryaccordion. By default the first accordion will be open, which is what you're after.

看起来您使用的不是JQuery手风琴，而是自定义构建的手风琴。我建议将其更改为JQUEry手风琴。默认情况下，第一个手风琴将打开，这就是您所追求的。

To get this effect in your example, simply add this to your custom.js file:

要在您的示例中获得这种效果，只需将其添加到您的 custom.js 文件中：

$(".desc:first").show();

$(".desc:first").show();

Add this in exactly this place (this is how your JS file looks like

在这个地方添加这个（这就是你的 JS 文件的样子

/***************************************************
TOGGLE JAVASCRIPT
***************************************************/
$(document).ready(function() {

$(".desc").hide();
$(".desc:first").show(); // <-- ADD IT HERE, AFTER THIS FIRST HIDE() CALL!

If you want to keep to first one open at all times, then simply remove the 'desc' class from the first h3tag in your html file.

如果您想始终保持第一个打开状态，只需从h3html 文件的第一个标签中删除“desc”类。

Small example:

小例子：

/***************************************************
TOGGLE JAVASCRIPT
***************************************************/
$(document).ready(function() {
    
$(".desc").hide();
    $(".desc:first").show(); // THIS LINE IS ADDED!!!
$("h3.open-close").click(function(){
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");
$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
});

    html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body {
    background-color: #F2F3F3;
    background-image: url("images/bg.jpg");
    background-repeat: repeat;
    color: #333333;
    font-family: 'DroidSerifRegular',Arial,sans-serif;
    font-size: 13px;
    line-height: 22px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
A:link {
    color: #333333;
    text-decoration: none;
}
A:visited {
    text-decoration: none;
}
A:active {
    text-decoration: none;
}
A:hover {
    color: #57AEAE;
    text-decoration: none;
}
@font-face {
    font-family: "BebasRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BEBAS___-webfont.eot?#iefix")  format("embedded-opentype"), url("fonts/BEBAS___-webfont.woff")  format("woff"), url("fonts/BEBAS___-webfont.ttf") format("truetype"),  url("fonts/BEBAS___-webfont.svg#BebasRegular") format("svg");
}
@font-face {
    font-family: "DroidSerifRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/DroidSerif-Regular-webfont.eot?#iefix")  format("embedded-opentype"),  url("fonts/DroidSerif-Regular-webfont.woff") format("woff"),  url("fonts/DroidSerif-Regular-webfont.ttf") format("truetype"),  url("fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular")  format("svg");
}
@font-face {
    font-family: "DroidSerifBold";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/DroidSerif-Bold-webfont.eot?#iefix")  format("embedded-opentype"), url("fonts/DroidSerif-Bold-webfont.woff")  format("woff"), url("fonts/DroidSerif-Bold-webfont.ttf")  format("truetype"),  url("fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold") format("svg");
}
@font-face {
    font-family: "GoudyBookletter1911Regular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/goudybookletter1911-openamp.eot?iefix")  format("eot"), url("fonts/goudybookletter1911-openamp.woff")  format("woff"), url("fonts/goudybookletter1911-openamp.ttf")  format("truetype"),  url("fonts/goudybookletter1911-openamp.svg#webfont0ZQvEa4G")  format("svg");
}
.openamp {
    font-family: GoudyBookletter1911Regular;
}
h1.fontface {
    color: #57AEAE;
    font: 34px/44px 'BebasRegular',Arial,sans-serif;
    letter-spacing: 0;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h2.fontface {
    color: #666666;
    font: 18px/27px 'DroidSerifBold',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h3.fontface {
    color: #666666;
    font: 18px/27px 'BebasRegular',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h4.fontface {
    color: #F1F2F2;
    font: 10px/23px 'DroidSerifBold',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 0 #FFFFFF;
}
#header {
    background-color: #57AEAE;
    height: 8px;
    position: relative;
    width: 100%;
}
#wrap {
    min-height: 100%;
}
#main {
    margin: 0 auto;
    min-height: 100%;
    overflow: auto;
    padding-bottom: 100px;
    position: relative;
    width: 970px;
}
#logo {
    float: left;
    padding-top: 30px;
    width: 960px;
}
#logo_text {
    float: left;
}
#social {
    float: right;
    margin-top: 25px;
}
#twitter {
    float: right;
}
#facebook {
    float: right;
    padding-right: 10px;
}
#mail {
    float: right;
    padding-right: 10px;
}
#slider_container {
    background-color: #FFFFFF;
    float: left;
    height: 260px;
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 5px;
    width: 950px;
}
.theme-default #slider {
    height: 260px;
    width: 950px;
}
#container {
    float: left;
    margin-bottom: 30px;
    margin-top: 30px;
    overflow: hidden;
    padding: 0;
    width: 960px;
}
#accordian_wrap {
    float: left;
    width: 960px;
}
.open-close {
    background-image: url("js/images/open.png");
    background-position: right 13px;
    background-repeat: no-repeat;
    font-family: 'BebasRegular';
    position: relative;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 100%;
}
.open-close a {
    background-image: url("js/images/border.gif");
    background-position: left bottom;
    background-repeat: repeat-x;
    color: #57AEAE;
    display: block;
    font-size: 24px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-decoration: none;
    text-transform: uppercase;
}
.open-close a:hover {
}
.current {
    background-attachment: scroll;
    background-image: url("js/images/close.png");
    background-position: right 13px;
    background-repeat: no-repeat;
    color: #189ACB;
}
.desc {
    background-image: url("js/images/border.gif");
    background-position: left bottom;
    background-repeat: repeat-x;
    overflow: hidden;
    padding-bottom: 20px;
    padding-top: 20px;
}
#content-top {
    border-bottom: 3px solid #349BA8;
    float: left;
    height: 24px;
    width: 100%;
    z-index: 8;
}
#close-tab {
    background-image: url("js/images/close1.png");
    background-position: center top;
    background-repeat: no-repeat;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    z-index: 99;
}
#close-tab a {
    display: block;
    height: 100%;
    width: 100%;
    z-index: 99;
}
#welcome {
    float: left;
    width: 150px;
}
#welcome_info {
    margin-top: 10px;
}
.photo_frame {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    margin-top: 5px;
    padding: 5px;
    width: 150px;
}
#hello {
    float: left;
    padding-left: 75px;
    width: 500px;
}
#hello_info {
    margin-top: 10px;
}
#skills {
    float: left;
    padding-left: 60px;
    width: 175px;
}
#skills_info {
    margin-top: 10px;
}
#ticks {
    float: left;
    margin-top: 2px;
}
#info {
    float: right;
    line-height: 23px;
    padding-right: 30px;
}
#cv {
    float: left;
    padding-top: 5px;
    width: 175px;
}
#cv_logo {
    float: left;
    margin-top: -5px;
}
#cv_info {
    float: right;
    line-height: 20px;
    padding-right: 75px;
}
.gallery_frame {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    margin-left: 20px;
    margin-top: 5px;
    padding: 5px;
    width: 150px;
}
.empty {
    float: left;
    height: 15px;
    width: 960px;
}
#blog {
    float: left;
    margin-right: 7px;
    width: 960px;
}
#blog_info {
    margin-bottom: 10px;
    margin-top: 10px;
}
#contact {
    float: left;
    margin-right: 7px;
    width: 250px;
}
#contact_info {
    margin-top: 10px;
}
#ways {
    float: left;
    margin-left: 70px;
    width: 350px;
}
#ways_info {
    margin-top: 10px;
}
#form {
    float: left;
    margin: 0;
    position: relative;
    width: 900px;
}
#form p {
    color: #999999;
    padding-right: 25px;
    padding-top: 15px;
}
#form div {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 300px;
}
#form div label {
    display: block;
    font-size: 0.9em;
    width: 310px;
}
.success {
    background-color: #FFFFFF;
    float: left;
    padding: 20px 30px;
    width: 920px;
}
.error {
    color: #CC0000;
    font-size: 11px;
    position: absolute;
    right: 12px;
    top: 0;
}
#form input, textarea {
    background-color: #EEEEEE;
    border-color: #C7C7C7 #E6E6E6 #E6E6E6 #C7C7C7;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    color: #CCCCCC;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin: 0 0 8px;
    padding: 11px 5px;
    width: 275px;
}
#form textarea {
    height: 85px;
    width: 300px;
}
#form input:focus, textarea:focus {
    background-color: #E1E1E1;
    border-color: #B4B4B4 #D6D6D6 #D6D6D6 #B4B4B4;
    color: #666666;
}
#form .submit {
    background-attachment: scroll;
    background-color: #57AEAE;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #EEEEEE;
    cursor: pointer;
    float: right;
    font-family: 'DroidSerifRegular',Arial,sans-serif;
    font-size: 13px;
    margin-bottom: 0;
    margin-right: -15px;
    margin-top: 0;
    padding-bottom: 6px;
    padding-top: 6px;
    position: relative;
    text-align: center;
    width: 315px;
}
#form .submit:hover, .submit.focus {
    background-color: #666666;
    color: #FFFFFF;
}
#form em {
    color: #CCCCCC;
    font-size: 0.9em;
    font-style: italic;
}
#footer {
    background: url("images/bg_footer.gif") repeat scroll 0 0 transparent;
    clear: both;
    height: 50px;
    margin-top: -50px;
    position: relative;
}
body:before {
    content: "";
    float: left;
    height: 100%;
    margin-top: -32767px;
    width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="accordian_wrap">
  <div id="container">
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">About Me</span></a></h3>
    <div class="desc" style="display: none;"> <!-- REMOVE DESC TO KEEP IT OPEN AT ALL TIMES!! -->
      <div id="welcome">
        <h3 class="fontface">Welcome</h3>
        <div id="welcome_info">
          <div class="photo_frame"> <img src="http://placehold.it/150x150"> </div>
        </div>
      </div>
      <div id="hello">
        <h3 class="fontface">Hello</h3>
        <div id="hello_info">
          <p class="fontface">I'm Edward Manson a web and graphics designer based in Belfast. I'm currently on my placement year working at Visionworks Interactive where I'm getting the opportunity to work on several projects as well as working within a dedicated and experienced team. I like anything that's compelling, intuitive and bespoke and try to implement these ideals when developing new ideas and pieces of work. I enjoy everything about design and work hard to always meet the goals of all parties involved. Have a look
            at my work and if you have any queries or questions please feel free to get in contact.</p>
        </div>
      </div>
      <div id="skills">
        <h3 class="fontface">Skills</h3>
        <div id="skills_info">
          <div id="ticks">
            <p><img src="images/ticks.png"></p>
            </div>
          <div id="info">
            <p>HTML &amp; CSS </p>
            <p>Javascript &amp; Jquery </p>
            <p>Graphics &amp; Layouts </p>
            <p>PHP, Wordpress</p>
            </div>
         
            <div id="cv">
        <div id="skills_info">
          <div id="cv_logo">
            <p><img src="images/cv.png"></p>
            </div>
          <div id="cv_info">
            <p><a href="images/personal_cv1.docx">View my CV</a></p>
            
            </div>
        </div>
      </div>
   
          
        </div>
      </div>
    </div>
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">My Work</span></a></h3>
    <div class="desc" style="display: none;">
      <div class="photo_frame"><a title="Rapid International Website Design" href="images/rapid.png" rel="example_group"><img src="images/rapid_1.png"></a></div>
      <div class="gallery_frame"><a title="Comhairle Interactive Map" href="images/map.png " rel="example_group"><img src="images/map_1.png"></a></div>
      <div class="gallery_frame"><a title="Alternative Heat Website Design" href="images/alternative_heat.png" rel="example_group"><img src="images/alternativeheat_1.png"></a></div>
      <div class="gallery_frame"><a title="Omagh Town Centre Website Design" href="images/omagh-web.png " rel="example_group"><img src="images/omagh_1.png"></a></div>
      <div class="empty"></div>
     
    </div>
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">Blog</span></a></h3>
    <div class="desc" style="display: none;">
      <div id="blog">
        <h3 class="fontface">September</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
         <h3 class="fontface">October</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
           
         <h3 class="fontface">November</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
           
         <h3 class="fontface">December</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>
    
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span>Contact Me</span></a></h3>
    <div class="desc" style="display: none;">
      <div id="contact">
        <h3 class="fontface">Get In Contact</h3>
        <div id="blog_info">
          <p class="fontface">If you'd like to work with me or provide me with feedback or feelings on any of my work fill out the form on the right and I'll get back in contact as quick as possble. I always like to hear from people so feel free.</p>
        </div>
      </div>
      <div id="ways">
        <h3 class="fontface">Contact Form</h3>
        <div id="ways_info">
          <form action="send.php" method="post" class="contactForm" id="form">
            <div class="holder"> </div>
            <!--END holder-->
            <div class="holder">
              <div>
                <label>Name<em>*</em></label>
                <input type="text" class="requiredField" name="name">
              </div>
              <div>
                <label>Email <em>*</em></label>
                <input type="text" class="requiredField email" name="email">
              </div>
            </div>
            <!--END holder-->
            <div class="holder">
              <div>
                <label>Message</label>
                <textarea cols="60" rows="6" name="message"></textarea>
              </div>
              <div>
                <input type="submit" title="Please make sure you filled out all required fields." class="submit toolTip" value="Submit">
              </div>
            </div>
            <!--END holder-->
          </form>
          <!--END ID form -->
        </div>
      </div>
    </div>
  </div>
</div>

回答by Steen

This WILL do the job...

这将完成工作......

$("html body div#wrap div#main div#accordian_wrap div#container h3.open-close a span").trigger('click');

But you may want to look in to identifying the clickable object more precisely....this may change on edit of page.

但是您可能想要更准确地识别可点击对象......这可能会在页面编辑时发生变化。

Just see if you can set an id or so on the span/a tag, so it can become:

看看你是否可以在 span/a 标签上设置一个 id 等，这样它就可以变成：

$("#firstItemOpen").trigger('click');

回答by JMax

You can use the activatemethod of the plugin. See the API documentationfor more information.

您可以使用activate插件的方法。有关更多信息，请参阅API 文档。

Something like:

就像是：

$( "#accordion" ).accordion( "activate" , 0)

$( "#accordion" ).accordion( "activate" , 0)

(if your tab "About Me" is the first one)

（如果您的标签“关于我”是第一个）

[EDIT]
Here is a working jsfiddle: http://jsfiddle.net/cA6bK/

[编辑]
这是一个有效的 jsfiddle：http: //jsfiddle.net/cA6bK/

You can trigger this API whenever you want (onload, onchangeor whatever)

您可以触发这个API，只要你想（onload，onchange或其他）

回答by totallyNotLizards

$('.desc').not(':first').hide();

Should hide all but the first desc div. Also, add the .currentclass to your first div.

应该隐藏除第一个 desc div 之外的所有内容。此外，将.current类添加到您的第一个 div。

This is assuming it's the first div you want to open.

这是假设它是您要打开的第一个 div。

回答by red-X

Use the activeargument

使用主动参数

$( "#myAcc" ).accordion({
   active: $(".defaultOpen")
});

回答by RUBEN

You could try this:

你可以试试这个：

$("#youdiv").addClass('in').attr('aria-expanded', 'true');