Блог

Главная - Вопросы по программированию - Сделать видимым, какая вкладка аккордеона открыта

Сделать видимым, какая вкладка аккордеона открыта

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть этот фрагмент «Тип аккордеона» прямо сейчас. Он открывает содержимое под кнопкой при нажатии и снова закрывает его. Теперь я ищу решение, чтобы сделать состояние кнопки видимым для пользователя, например, если кнопка 2 открыта, я хочу показать «-«, указывающее, что ее можно закрыть щелчком мыши. То же самое с закрытыми кнопками, чтобы показать » «. Возможно ли это? Заранее спасибо 🙂

Это мой код прямо сейчас:

 jQuery(function() {
  jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery(this).next('.ss_content').slideToggle('fast');
  });
  jQuery('.ss_content').eq(1).show();
});  
 #ss_menu {
  width: auto;
}

.ss_button {
  background-color: #049132;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 5px;
  color: #FFFFFF;
}

.ss_content {
  background-color: white;
  display: none;
  padding: 10px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
  <div class="ss_button">Einsteiger</div>
  <div class="ss_content">
    <p>Test1</p>
  </div>
  <div class="ss_button">Mittelklasse</div>
  <div class="ss_content">
    <p>Test2</p>
  </div>
  <div class="ss_button">High-End</div>
  <div class="ss_content">
    <p>Test3</p>
  </div>

</div>

Ответ №1:

Я добавил некоторые изменения в ваш css:

 .ss_button:before {
  content: "  ";
}

.ss_button.active:before{
content: "- ";
}

Затем мы настраиваем active класс:

 jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
jQuery(this).toggleClass('active');

Таким образом, вам не нужно изменять свой html.

ДЕМОНСТРАЦИЯ

 jQuery(function() {
  jQuery('.ss_button').on('click', function() {
    jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
    jQuery(this).toggleClass('active');
    jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
    jQuery(this).next('.ss_content').slideToggle('fast');
  });
  jQuery('.ss_content').eq(1).show();
});  
 #ss_menu {
  width: auto;
}

.ss_button {
  background-color: #049132;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 5px;
  color: #FFFFFF;
}

.ss_button:before {
  content: "  ";
}

.ss_button.active:before{
content: "- ";
}

.ss_content {
  background-color: white;
  display: none;
  padding: 10px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
  <div class="ss_button">Einsteiger</div>
  <div class="ss_content">
    <p>Test1</p>
  </div>
  <div class="ss_button active">Mittelklasse</div>
  <div class="ss_content">
    <p>Test2</p>
  </div>
  <div class="ss_button">High-End</div>
  <div class="ss_content">
    <p>Test3</p>
  </div>

</div>

Комментарии:

1. @JonasLinde Нет проблем, рад помочь.

2. Я не знаю, можете ли вы помочь мне с этим, или мне следует открыть новую ветку, но как я могу прокрутить страницу до кнопки при нажатии? (Кнопки будут использоваться только на мобильных устройствах и будут иметь довольно длинное содержимое.) Прямо сейчас начало содержимого не отображается в верхней части страницы. Я надеюсь, что вопрос не сбивает с толку, не знаю, как сформулировать его по-другому: D

3. @JonasLinde Я бы посоветовал вам открыть новую ветку, чтобы вопросы не смешивались 🙂

Ответ №2:

Вы можете добавить пустой интервал в свои кнопки и изменить содержимое ( или -) в функциях щелчка. Проверьте строки # 4 и # 6, они совпадают с кодом.

 jQuery(function() {
  jQuery('.ss_button').on('click', function() {
    jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
    jQuery('.ss_button').find('span').text(' ');
    jQuery(this).next('.ss_content').slideToggle('fast');
    jQuery(this).find('span').text('-');
  });
  jQuery('.ss_content').eq(1).show();
});
    
 #ss_menu {
  width: auto;
}

.ss_button {
  background-color: #049132;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 5px;
  color: #FFFFFF;
}

.ss_content {
  background-color: white;
  display: none;
  padding: 10px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
  <div class="ss_button">Einsteiger 
    <span> </span></div>
  <div class="ss_content">
    <p>Test1</p>
  </div>
  <div class="ss_button">Mittelklasse
    <span> </span></div>
  <div class="ss_content">
    <p>Test2</p>
  </div>
  <div class="ss_button">High-End
    <span> </span></div>
  <div class="ss_content">
    <p>Test3</p>
  </div>
</div>