Как оформить аккордеонные кнопки в ряд так, чтобы текст все открывался в один и тот же элемент
JUNIT: НАБЛЮДЕНИЕ И РЕГУЛИРОВАНИЕ
Вот моя перспектива JUNIT.
JUNIT можно использовать для: 1) Наблюдать за поведением системы, когда новый блок добавляется в эту систему , 2) Внесите корректировки в систему, чтобы приветствовать «новое» устройство в системе. Какие? Точно.
Реальная жизнь, например
Когда ваш родственник посещает комнату в общежитии вашего колледжа, 1) вы будете притворяться более ответственными. 2) Вы будете хранить все, где должны быть, например, обувь в стойке для обуви не на стуле, одежда в шкафу не на стуле. 3) Вы избавитесь от всех контрабанд. 4) вы начнете чистку в каждом устройстве, которое у вас есть.
В терминах программирования
Система: ваш код UNIT: новая функциональность. Поскольку среда JUNIT используется для языка JAVA, поэтому JUNIT = JAVA UNIT (возможно, будет).
Предположим, что у вас уже есть код с пуленепробиваемым кодом, но появилось новое требование, и вам нужно добавить новое требование в свой код. Это новое требование может нарушить ваш код для некоторого ввода (testcase).
. Легкий способ адаптации этого изменения - использовать модульное тестирование (JUNIT). Для этого вы должны написать несколько тестовых файлов для своего кода при создании своей кодовой базы. И всякий раз, когда приходит новое требование, вы просто запускаете все тестовые примеры, чтобы проверить, не завершился ли какой-либо тест. Если «Нет», вы являетесь художником BadA **, и вы готовы развернуть новый код. Если какой-либо из тест-систем не работает, вы меняете свой код и снова запускаете тестовые файлы, пока не получите зеленый статус.
1 ответ
Я немного подправил ваш пример https://jsfiddle.net/7szxorcq/17/
HTML
<button class="accordion">Button 1</button>
<button class="accordion">Button 2</button>
<button class="accordion">Button 3</button>
<button class="accordion">Button 4</button>
<div class="story">
<p>1 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. Duis aute iruredolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscingelit,
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
<p>2 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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
<p>3 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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
<p>4 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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Javascript
const acc = document.getElementsByClassName("accordion");
const stories = document.getElementsByClassName("story");
for (let i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", () => {
// Show the story we clicked on
for (let j = 0; j < stories.length; j++) {
stories[j].style.display = i === j
? 'block'
: 'none';
}
});
}