1
好吧，所以我必須禁用其他複選框，當一個是活動的，並設法保持我的手風琴面板的過渡動畫，但我不知道如何切換面板一旦我點擊「是」複選框。 當你點擊「YES」複選框時，你仍然需要點擊第一個手風琴面板才能打開它。我一直在尋找的是當我點擊「是」複選框時，它應該切換面板。如何使用複選框和僅複選框切換手風琴菜單？
到目前爲止，這是我事先得到了
<script>
\t \t \t
\t var acc = document.getElementsByClassName("accordion_1");
\t var i;
\t for (i = 0; i < acc.length; i++) {
\t acc[i].onclick = function() {
\t \t this.classList.toggle("active");
\t \t var panel = this.nextElementSibling;
\t \t if (panel.style.maxHeight){
\t \t panel.style.maxHeight = null;
\t \t } else {
\t \t panel.style.maxHeight = panel.scrollHeight + "px";
\t \t }
\t }
\t }
\t
\t $(document).ready(function() {
\t \t $('#check_main').change(function() {
\t \t \t $('#panel_main').toggle();
\t \t \t var acc = document.getElementsByClassName("accordion_main");
\t \t \t var i;
\t
\t \t \t for (i = 0; i < acc.length; i++) {
\t \t \t \t acc[i].onclick = function() {
\t \t \t \t \t this.classList.toggle("active");
\t \t \t \t \t var panel = this.nextElementSibling;
\t \t \t \t \t if (panel.style.maxHeight){
\t \t \t \t \t \t panel.style.maxHeight = null;
\t \t \t \t \t } else {
\t \t \t \t \t \t panel.style.maxHeight = panel.scrollHeight + "px";
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t });
\t });
\t $(".checkbx, .GrpChk").change(function() {
\t \t this.checked ? $("." + this.className).not(this).prop("disabled", true):$("." + this.className).not(this).prop("disabled", false);
\t });
</script>button.accordion_1{
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion_1.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
button.accordion_main{
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion_main.active, button.accordion:hover {
background-color: #ddd;
}
div.panel_main{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<div class="box item1">
\t \t <button class="accordion_main" id="check_holder"> TOTALLY RANDOM TEXT FOR TESTING
\t \t \t <div class="check_box"> \t
\t \t \t \t <span>
\t \t \t \t \t <form name="aForm" action="">
\t \t \t \t \t \t <p>
\t \t \t \t \t \t <label>
\t \t \t \t \t \t \t <!--<input type="checkbox" name="check" id="check" value="1"> YES-->
\t \t \t \t \t \t \t <input class="checkbx" id="check_main" name="Role" type="checkbox" value="yes"/>YES
\t \t \t \t \t \t </label>
\t \t \t \t \t \t <label>
\t \t \t \t \t \t \t <input class="checkbx" name="Role" type="checkbox" value="no"/> NO
\t \t \t \t \t \t </label>
\t \t \t \t \t \t </p>
\t \t \t \t \t </form>
\t \t \t \t </span>
\t \t \t </div>
\t \t </button>
\t \t <div class="panel_main" id="panel_main" style="display:none;">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
\t \t </div>
\t \t <button class="accordion_1">Section 2</button>
\t \t <div class="panel">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
\t \t </div>
\t \t <button class="accordion_1">Section 3</button>
\t \t <div class="panel">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
\t \t </div>
\t </div>
謝謝，但第一個面板仍然打開點擊，我希望它打開時，只有當你點擊「是」複選框。我不太確定如何做到這一點。如果它通過使用JavaScript我完全不知道從哪裏開始。 感謝您的答覆。 – Genobee
對不起，我明白了謝謝你！ – Genobee
不客氣。祝你的項目好運 – Gerard