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