Jquery Accordion Script

250

04 марта 2018, 22:36

При повторном нажатии, нужно чтобы закрывалось, в моем случае он заново раскрывается. Как предотвратить это?

$('.accordion_button').click(function(event) { 
  $('.item_content').slideUp(200); 
  $(this).next('.item_content').slideToggle(200); 
   
});

.accordion_item{ 
    border-bottom: 1px solid transparent; 
     
} 
.accordion_button a{ 
    color:#fff; 
    padding:0 15px; 
    background-color: #0E6937; 
    font-weight: bold; 
    font-size: 16px; 
    height: 40px; 
    line-height: 40px; 
    display: flex; 
    align-items: center; 
} 
 
.item_content{ 
    color: #fff; 
    display: none; 
    background: #237E4C; 
     
} 
.item_content ul{ 
    margin: 0; 
} 
.item_content ul li a{ 
    padding-left: 40px; 
    color: #fff; 
    line-height: 35px; 
    font-weight: bold; 
    font-size: 14px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="accordion"> 
            <div class="accordion_list"> 
              <div class="accordion_item"> 
                <div class="accordion_button"> 
                  <a href="#"> 
                    <span class="glyphicon glyphicon-home"></span>My GoodGross 
                  </a> 
                </div> 
                <div class="item_content"> 
                  <ul> 
                    <li> 
                      <a href="#">My (company) profile</a> 
                    </li> 
                    <li class="extra"> 
                      <a href="#" class="toggle"> 
                        Contact info 
                        <span class="glyphicon glyphicon-chevron-down"  
                        style="margin-left:0.5rem;"></a> 
                      <ul class="list_toggle"> 
                        <li><a href="#">Address</a></li> 
                        <li><a href="#">Phone</a></li> 
                      </ul> 
                    </li> 
                    <li><a href="#">My PayPal account</a></li> 
                 
                  </ul> 
                </div> 
              </div> 
              <div class="accordion_item"> 
                <div class="accordion_button"> 
                  <a href="#"> 
                    <span class="glyphicon glyphicon-envelope"></span>Messages 
                  </a> 
                </div> 
                <div class="item_content"> 
                  <ul> 
                    <li> 
                      <a href="#">My (company) profile</a> 
                    </li> 
                    <li class="extra"> 
                      <a href="#" class="toggle"> 
                        Contact info 
                        <span class="glyphicon glyphicon-chevron-down"  
                        style="margin-left:0.5rem;"></a> 
                      <ul class="list_toggle"> 
                        <li><a href="#">Address</a></li> 
                        <li><a href="#">Phone</a></li> 
                      </ul> 
                    </li> 
                    <li><a href="#">My PayPal account</a></li> 
                 
                  </ul> 
                </div> 
              </div> 
              <div class="accordion_item"> 
                <div class="accordion_button"> 
                  <a href="#"> 
                    <span class="glyphicon glyphicon-user"></span>My Buying 
                  </a> 
                </div> 
                <div class="item_content"> 
                  <ul> 
                    <li> 
                      <a href="#">My (company) profile</a> 
                    </li> 
                    <li class="extra"> 
                      <a href="#" class="toggle"> 
                        Contact info 
                        <span class="glyphicon glyphicon-chevron-down"  
                        style="margin-left:0.5rem;"></span></a> 
                      <ul class="list_toggle"> 
                        <li><a href="#">Address</a></li> 
                        <li><a href="#">Phone</a></li> 
                      </ul> 
                    </li> 
                    <li><a href="#">My PayPal account</a></li> 
                 
                  </ul> 
                </div> 
              </div> 
              <div class="accordion_item"> 
                <div class="accordion_button"> 
                  <a href="#"> 
                    <span class="glyphicon glyphicon-usd"></span>My Selling 
                  </a> 
                </div> 
                <div class="item_content"> 
                  <ul> 
                    <li><a href="#">Watching</a></li> 
                    <li><a href="#">Best offers</a></li> 
                    <li><a href="#">Active</a></li> 
                    <li><a href="#">Pending</a></li> 
                    <li><a href="#">History</a></li> 
                 
                  </ul> 
                </div> 
                 
              </div> 
              <div class="accordion_item"> 
                <div class="accordion_button"> 
                  <a href="#"> 
                    <span class="glyphicon glyphicon-cog"></span>Settings 
                  </a> 
                </div> 
                <div class="item_content"> 
                  <ul> 
                    <li><a href="#">Change Password</a></li> 
                    <li><a href="#">Edit Bank Account</a></li> 
                    <li><a href="#">Set a security question</a></li> 
                     
                  </ul> 
                </div> 
                 
              </div> 
               
            </div>   
          </div>

Answer 1

Например:

$('.accordion_button a').click(function(e) { // Клик на ссылку кнопки 
  e.preventDefault();                        // Запрещаем переход по ссылке 
   
  var $this = $(this), 
      item = $this.closest('.accordion_item'), // Находим пункт в котором кнопка находится 
      content = item.find('.item_content'),    // Находим контент именно внутри этого пункта 
      contents = $('.item_content');           // Все контенты во всех пунктах 
   
  if(!item.hasClass('open')){                  // Если пункт не открыт (нет класса open) 
    contents.slideUp(200);                     // Сварачиваем все контенты 
    item.addClass('open').siblings().removeClass('open');  // Открываем необходимый пункт (добавляем класс open), все остальные закрываем (у всех остальных удаляем класс open) 
    content.slideDown(200);                    // Показываем контент именно этого пункта 
  } else {  
    item.removeClass('open');                 // Иначе у всех убираем класс open и все контенты убираем 
    contents.slideUp(200); 
  } 
   
});

.accordion_item{ 
    border-bottom: 1px solid transparent; 
     
} 
.accordion_button a{ 
    color:#fff; 
    padding:0 15px; 
    background-color: #0E6937; 
    font-weight: bold; 
    font-size: 16px; 
    height: 40px; 
    line-height: 40px; 
    display: flex; 
    align-items: center; 
} 
 
.item_content{ 
    color: #fff; 
    display: none; 
    background: #237E4C; 
     
} 
.item_content ul{ 
    margin: 0; 
} 
.item_content ul li a{ 
    padding-left: 40px; 
    color: #fff; 
    line-height: 35px; 
    font-weight: bold; 
    font-size: 14px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="accordion"> 
  <div class="accordion_list"> 
    <div class="accordion_item"> 
      <div class="accordion_button"> 
        <a href="#"> 
          <span class="glyphicon glyphicon-home"></span>My GoodGross 
        </a> 
      </div> 
      <div class="item_content"> 
        <ul> 
          <li> 
            <a href="#">My (company) profile</a> 
          </li> 
          <li class="extra"> 
            <a href="#" class="toggle"> 
              Contact info 
              <span class="glyphicon glyphicon-chevron-down"  
                    style="margin-left:0.5rem;"></a> 
              <ul class="list_toggle"> 
                <li><a href="#">Address</a></li> 
                <li><a href="#">Phone</a></li> 
              </ul> 
              </li> 
          <li><a href="#">My PayPal account</a></li> 
 
        </ul> 
      </div> 
    </div> 
    <div class="accordion_item"> 
      <div class="accordion_button"> 
        <a href="#"> 
          <span class="glyphicon glyphicon-envelope"></span>Messages 
        </a> 
      </div> 
      <div class="item_content"> 
        <ul> 
          <li> 
            <a href="#">My (company) profile</a> 
          </li> 
          <li class="extra"> 
            <a href="#" class="toggle"> 
              Contact info 
              <span class="glyphicon glyphicon-chevron-down"  
                    style="margin-left:0.5rem;"></a> 
              <ul class="list_toggle"> 
                <li><a href="#">Address</a></li> 
                <li><a href="#">Phone</a></li> 
              </ul> 
              </li> 
          <li><a href="#">My PayPal account</a></li> 
 
        </ul> 
      </div> 
    </div> 
    <div class="accordion_item"> 
      <div class="accordion_button"> 
        <a href="#"> 
          <span class="glyphicon glyphicon-user"></span>My Buying 
        </a> 
      </div> 
      <div class="item_content"> 
        <ul> 
          <li> 
            <a href="#">My (company) profile</a> 
          </li> 
          <li class="extra"> 
            <a href="#" class="toggle"> 
              Contact info 
              <span class="glyphicon glyphicon-chevron-down"  
                    style="margin-left:0.5rem;"></span></a> 
            <ul class="list_toggle"> 
              <li><a href="#">Address</a></li> 
              <li><a href="#">Phone</a></li> 
            </ul> 
          </li> 
          <li><a href="#">My PayPal account</a></li> 
 
        </ul> 
      </div> 
    </div> 
    <div class="accordion_item"> 
      <div class="accordion_button"> 
        <a href="#"> 
          <span class="glyphicon glyphicon-usd"></span>My Selling 
        </a> 
      </div> 
      <div class="item_content"> 
        <ul> 
          <li><a href="#">Watching</a></li> 
          <li><a href="#">Best offers</a></li> 
          <li><a href="#">Active</a></li> 
          <li><a href="#">Pending</a></li> 
          <li><a href="#">History</a></li> 
 
        </ul> 
      </div> 
 
    </div> 
    <div class="accordion_item"> 
      <div class="accordion_button"> 
        <a href="#"> 
          <span class="glyphicon glyphicon-cog"></span>Settings 
        </a> 
      </div> 
      <div class="item_content"> 
        <ul> 
          <li><a href="#">Change Password</a></li> 
          <li><a href="#">Edit Bank Account</a></li> 
          <li><a href="#">Set a security question</a></li> 
 
        </ul> 
      </div> 
 
    </div> 
 
  </div>   
  </div>

Answer 2

    $('.accordion_button').click(function(event) {
    $('.accordion_button').addClass('sleep');
    $(this).removeClass('sleep');
    $(this).next('.item_content').slideToggle(200);
    $('.accordion_button.sleep').next('.item_content').slideUp(200);
});

Присваиваем остальным элементам класс 'sleep'. С кнопки, на которую нажимаем убираем этот класс. Что-то типа булеана получается. Затем делаем slideUp(), для всех переведённых в спящие. Так как на щелкнутом элементе нет этого класса, он не сворачивается...