如何通过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>