如何通过dfault激活第一手风琴 [英] how to active first accordion by dfault

问题描述

下面是我取得的手风琴，现在看起来不错，我试图将第一个手风琴指定为默认手风琴，但是我做不到.我认为我必须用jquery完成，但是我在Js和其他方面都不是菜鸟.感谢您的快速解决方案.

Below is the accordion I have achieved and it looks good now I am trying to assign the first accordion as a default open but I am unable to do. I think i must be done with jquery but I am noob in Js and all. Appreciate your quick solution.

$(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>

推荐答案

您可以在加载后的第一个事件上触发click事件，因此新的js看起来像这样.

You can just trigger the click event on the first one after it is loaded, so your new js would look like this.

$(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
});

这篇关于如何通过dfault激活第一手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！