如何通過dfault激活第一個手風琴

Question

下面是我已經實現的手風琴，它看起來不錯，現在我試圖將第一個手風琴指定爲默認打開，但我無法做到。我認爲我必須用jquery完成，但我在Js和所有人都是noob。欣賞您的快速解決方案。

$(document).ready(function() { 
 
    //toggle the component with class accordion_body 
 
    $(".accordion_head").click(function() { 
 
     if ($('.accordion_body').is(':visible')) { 
 
      $(".accordion_body").slideUp(300); 
 
      $(".plusminus").text('+'); 
 
     } 
 
     if ($(this).next(".accordion_body").is(':visible')) { 
 
      $(this).next(".accordion_body").slideUp(300); 
 
      $(this).children(".plusminus").text('+'); 
 
     } else { 
 
      $(this).next(".accordion_body").slideDown(300); 
 
      $(this).children(".plusminus").text('-'); 
 
     } 
 
    }); 
 
});

.accordion_container { 
 
    width: 100%; 
 
} 
 
.accordion_head { 
 
    background-color:#e74c3c; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-family: 'Abel'; 
 
    font-size: 20px; 
 
    margin: 0 0 1px 0; 
 
    padding: 7px 11px; 
 
    padding-left:35px; 
 
    font-weight: bold; 
 
} 
 
.accordion_body { 
 
    font-size: 20px!important; 
 
    background: transparent; 
 
    color:#666; 
 
    padding: 7px 11px; 
 
    padding-left:35px; 
 
    padding-right:35px; 
 
} 
 
.accordion_body p { 
 
    padding: 18px 5px; 
 
    margin: 0px; 
 
} 
 
.plusminus { 
 
    font-size: 20px!important; 
 
    float:right; 
 
} 
 

 

 
.accordion_container h5{ 
 
    font-family: 'Abel'; 
 
    text-transform: uppercase; 
 
    text-align: left; 
 
    color: #666; 
 
    text-shadow: 1px 1px #000; 
 
    font-weight: 100; 
 
    font-size: 24px; 
 
    line-height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion_container"> 
 
      <div class="accordion_head"><span class="glyphicon glyphicon-heart"></span>Accordion #01<span class="plusminus">+</span> 
 
      </div> 
 
      <div class="accordion_body"> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
      </div><hr> 
 
      <div class="accordion_head"><span class="glyphicon glyphicon-heart"></span>Accordion #02<span class="plusminus">+</span> 
 
      </div> 
 
      <div class="accordion_body"> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
      </div><hr> 
 
      <div class="accordion_head"><span class="glyphicon glyphicon-heart"></span>Accordion #03<span class="plusminus">+</span> 
 
      </div> 
 
      <div class="accordion_body"> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
      </div> 
 
     </div>

Answer 1

你可以只觸發它被加載後的第一個click事件，因此新的JS是這樣的。

$(document).ready(function() { 
    //toggle the component with class accordion_body 
    $(".accordion_head").click(function() { 
     if ($('.accordion_body').is(':visible')) { 
      $(".accordion_body").slideUp(300); 
      $(".plusminus").text('+'); 
     } 
     if ($(this).next(".accordion_body").is(':visible')) { 
      $(this).next(".accordion_body").slideUp(300); 
      $(this).children(".plusminus").text('+'); 
     } else { 
      $(this).next(".accordion_body").slideDown(300); 
      $(this).children(".plusminus").text('-'); 
     } 
    }); 

    $(".accordion_head").first().click(); //<-- new line of code 
}); 

Answer 2

我已經添加顯示：沒有對類.accordion_body這將隱藏所述主體用於每個選項卡和添加了一個類。活躍，使得它的默認打開被添加到第一手風琴式標籤的HTML代碼。

$(document).ready(function() { 
 
    //toggle the component with class accordion_body 
 
    $(".accordion_head").click(function() { 
 
     if ($('.accordion_body').is(':visible')) { 
 
      $(".accordion_body").slideUp(300); 
 
      $(".plusminus").text('+'); 
 
     } 
 
     if ($(this).next(".accordion_body").is(':visible')) { 
 
      $(this).next(".accordion_body").slideUp(300); 
 
      $(this).children(".plusminus").text('+'); 
 
     } else { 
 
      $(this).next(".accordion_body").slideDown(300); 
 
      $(this).children(".plusminus").text('-'); 
 
     } 
 
    }); 
 
});

.accordion_container { 
 
    width: 100%; 
 
} 
 
.accordion_head { 
 
    background-color:#e74c3c; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-family: 'Abel'; 
 
    font-size: 20px; 
 
    margin: 0 0 1px 0; 
 
    padding: 7px 11px; 
 
    padding-left:35px; 
 
    font-weight: bold; 
 
} 
 
.accordion_body { 
 
    font-size: 20px!important; 
 
    display: none; 
 
    background: transparent; 
 
    color:#666; 
 
    padding: 7px 11px; 
 
    padding-left:35px; 
 
    padding-right:35px; 
 
} 
 
.accordion_body p { 
 
    padding: 18px 5px; 
 
    margin: 0px; 
 
} 
 
.plusminus { 
 
    font-size: 20px!important; 
 
    float:right; 
 
} 
 
.active{ 
 
display: block; 
 
} 
 

 

 
.accordion_container h5{ 
 
    font-family: 'Abel'; 
 
    text-transform: uppercase; 
 
    text-align: left; 
 
    color: #666; 
 
    text-shadow: 1px 1px #000; 
 
    font-weight: 100; 
 
    font-size: 24px; 
 
    line-height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion_container"> 
 
      <div class="accordion_head"><span class="glyphicon glyphicon-heart"></span>Accordion #01<span class="plusminus">+</span> 
 
      </div> 
 
      <div class="active accordion_body"> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
      </div><hr> 
 
      <div class="accordion_head"><span class="glyphicon glyphicon-heart"></span>Accordion #02<span class="plusminus">+</span> 
 
      </div> 
 
      <div class="accordion_body"> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
      </div><hr> 
 
      <div class="accordion_head"><span class="glyphicon glyphicon-heart"></span>Accordion #03<span class="plusminus">+</span> 
 
      </div> 
 
      <div class="accordion_body"> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
      </div> 
 
     </div>