如何使用复选框切换手风琴菜单而只选中该复选框？

时间：2017-08-09 08:13:57

标签： javascript html css accordion

好吧，所以当一个人处于活动状态时我必须禁用其他复选框，并设法保留手风琴面板的过渡动画，但是当我点击“是”时我无法弄清楚如何切换面板复选框。 它的作用是当你点击“YES”复选框时，你仍然需要点击第一个手风琴面板来打开它。我要找的是当我点击“是”复选框时，它应该切换面板。

到目前为止，这是我得到的 

<script>
			
	var acc = document.getElementsByClassName("accordion_1");
	var i;

	for (i = 0; i < acc.length; i++) {
	  acc[i].onclick = function() {
		this.classList.toggle("active");
		var panel = this.nextElementSibling;
		if (panel.style.maxHeight){
		  panel.style.maxHeight = null;
		} else {
		  panel.style.maxHeight = panel.scrollHeight + "px";
		} 
	  }
	}
	
	$(document).ready(function() {
		$('#check_main').change(function() {
			$('#panel_main').toggle();

			var acc = document.getElementsByClassName("accordion_main");
			var i;
	
			for (i = 0; i < acc.length; i++) {
				acc[i].onclick = function() {
					this.classList.toggle("active");
					var panel = this.nextElementSibling;
					if (panel.style.maxHeight){
						panel.style.maxHeight = null;
					} else {
						panel.style.maxHeight = panel.scrollHeight + "px";
					} 
				}
			}
		});
	});
	$(".checkbx, .GrpChk").change(function() {
		this.checked ? $("." + this.className).not(this).prop("disabled", true):$("." + this.className).not(this).prop("disabled", false);
	});
</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">
		<button class="accordion_main" id="check_holder"> TOTALLY RANDOM TEXT FOR TESTING
			<div class="check_box">	
				<span>
					<form name="aForm" action="">
						<p>
						<label>
							<!--<input type="checkbox" name="check" id="check" value="1"> YES-->
							<input class="checkbx" id="check_main" name="Role" type="checkbox" value="yes"/>YES
						</label>
						<label>
							<input class="checkbx" name="Role" type="checkbox" value="no"/> NO
						</label>
						</p>
					</form>
				</span>
			</div>
		</button> 
		<div  class="panel_main" id="panel_main" style="display:none;">
			<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>
		</div>
		<button class="accordion_1">Section 2</button>
		<div class="panel">
			<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>
		</div>
		<button class="accordion_1">Section 3</button>
		<div class="panel">
			<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>
		</div>
	</div>
再次，提前谢谢你们，我已经为此工作了两天了，任何帮助都非常感谢！

2 个答案:

答案 0 :(得分：0)

为与第2部分和第3部分的按钮相关的类提供不同的名称。

＆＃13;
＆＃13; 
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
＆＃13; 
button.accordion, button.accordionn {
  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.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;
}
＆＃13; 
<div class="wrapper">
  <div class="box item1">
    <button class="accordion" style="align:right;"> TOTALLY RANDOM TEXT FOR TESTING
            <ul style="display:in-line;">
                <li>
                    <input type="checkbox" id="check1" />
                    <label for="check1">YES</label>
                </li>
                <li>
                    <input type="checkbox" id="check2" />
                    <label for="check2">NO</label>
                </li>
            </ul>
        </button>
    <div class="panel">
      <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>
    </div>

    <button class="accordionn">Section 2</button>
    <div class="panel">
      <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>
    </div>

    <button class="accordionn">Section 3</button>
    <div class="panel">
      <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>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我知道了！ 这里是我想要做的参考。

<div class="box item1">
            <button class="accordion_main" id="check_holder"> TOTALLY RANDOM TEXT FOR TESTING
                <div class="check_box"> 
                    <span>
                        <form name="aForm" action="">
                            <p>
                            <label>
                                <!--<input type="checkbox" name="check" id="check" value="1"> YES-->
                                <input class="checkbx" id="check_main" name="Role" type="checkbox" value="yes"/>YES
                            </label>
                            <label>
                                <input class="checkbx" name="Role" type="checkbox" value="no"/> NO
                            </label>
                            </p>
                        </form>
                    </span>
                </div>
            </button> 
            <div  class="panel_main" id="panel_main" style="display:none;text-align:center;">
                <div class="wrapper_acc">
                    <div class="box_acc a_acc">A</div>
                    <div class="box_acc b_acc">B</div>
                    <div class="box_acc c_acc">C</div>
                    <div class="box_acc d_acc">D</div>
                    <div class="box_acc e_acc">E</div>
                    <div class="box_acc f_acc">F</div>
                </div>
            </div>

<script>
        var acc = document.getElementsByClassName("accordion_1");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc[i].onclick = function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
              panel.style.maxHeight = null;
            } else {
              panel.style.maxHeight = panel.scrollHeight + "px";
            } 
          }
        }

        $(document).ready(function() {
            $('#check_main').change(function() {
                $('#panel_main').toggle("fast","linear");

            });
        });
        $(".checkbx, .GrpChk").change(function() {
            this.checked ? $("." + this.className).not(this).prop("disabled", true):$("." + this.className).not(this).prop("disabled", false);
        });
    </script>

而不是使用相同的过渡效果，而不是使用其他2个面板

$('#panel_main').toggle("fast","linear");

如果您注意到我删除了div.panel的css。 这是我的主要错误，我的css是js的冲突。谢谢你们！

相关问题
最新问题