从<label>单击

Question

我正在制作一个带有侧面菜单列表的触摸屏友好下拉列表。我使用了隐藏的单选按钮方法，通过使用标签控制单选按钮来提供带有触摸功能打开每个菜单的功能。

我希望人们能够再次触摸选定的项目以将其折叠回去。它不能是复选框，因为侧面菜单位于上一个菜单旁边的同一区域，因此我需要单选按钮可以取消选择当前选择的内容。

我发现这是因为可以取消选择单选按钮，并且可以正常工作：

window.onload = function(){
document.querySelectorAll("INPUT[type='radio']").forEach(function(rd){rd.addEventListener("mousedown",
    function(){
        if (this.checked) {this.onclick=function(){this.checked=false}} else{this.onclick=null}
    })})}

我需要进行修改，因为我需要单选按钮元素之后的标签上的侦听器（因为单选按钮是通过标签隐藏和控制的）。所以我尝试这样做：

window.onload = function(){
document.querySelectorAll('ul li > input + label').forEach(function(rd){rd.addEventListener("mousedown",
    function(){
        if (this.previousElementSibling.checked) {this.onclick=function(){this.previousElementSibling.checked=false}} else{this.onclick=null}
    })})}

我觉得它应该可以工作，但是不能。我担心我无法获得标签的previousElementSibling，但这可以很好地向我展示我要修改的状态：

function gettest() {
document.getElementById('demo').innerHTML = document.querySelector('ul li > input + label').previousElementSibling.checked
}

以下是由嵌套列表组成的展开菜单的HTML：

<nav id="lcn-dropdown">
    <input type="checkbox" id="main-drop">
    <label for="main-drop" id="toggle-main">&dtrif;</label>
    <ul id="main-list">
    <li>
    <input type="radio" id="1-1-radio" name="1-menu">
    <label for="1-1-radio" class="sub-toggle">&nbsp; A00-A08 &rtrif;</label>
                                <ul class="side-from-1">
                                <li><a href ="#"> A00 ALIS &rtrif;</a>
                                                        <!--<ul class="side-from-1">
                                                        <li><a href ="#" class="third"> A00100 Test</a></li>
                                                        <li>              <a href ="#"> XXXXXX</a></li>
                                                        <li> <a href ="#" class="last"> XXXXXX</a></li>
                                                        </ul>-->
                                </li>
                                <li><a href ="#"> A01 Documentation &rtrif;</a></li>
                                <li><a href ="#"> A03 Servicing &rtrif;</a></li>
                                <li><a href ="#"> A05 General &rtrif;</a></li>
                                <li><a href ="#"> A07 Testing &rtrif;</a></li>
                                <li><a href ="#" class="last"> A08 Testing &rtrif;</a></li>
                                </ul>
    </li>
    </ul>
</nav>

Answer 1

这很丑陋，但我想我已经明白了。

单击标签时，将触发单选按钮的click事件。使用标签的鼠标右键捕获单选按钮的当前状态。然后在单选按钮的事件处理程序中，检查此状态并根据需要取消切换。

window.onload = function() {

  document.querySelectorAll('ul li > input + label').forEach(function(rd) {
    rd.addEventListener("mousedown",
      function() {
        //store if we need to toggle as a data attribute on the radio button
        this.previousElementSibling.dataset.uncheck = this.previousElementSibling.checked;
      });
  });


  document.querySelectorAll('ul li > input[type=radio]').forEach(function(rd) {
      rd.addEventListener("click",  function() {          
          var tog = this.checked && this.dataset.uncheck === "true";
          console.log(this);
          //Check the data attribute   
          if (tog == true) {
            this.checked = false;
          }
        });
      });
  };

<nav id="lcn-dropdown">
  <input type="checkbox" id="main-drop">
  <label for="main-drop" id="toggle-main">&dtrif;</label>
  <ul id="main-list">
    <li>
      <input type="radio" id="1-1-radio" name="1-menu">
      <label for="1-1-radio" class="sub-toggle">&nbsp; A00-A08 &rtrif;</label>
      <ul class="side-from-1">
        <li><a href="#"> A00 ALIS &rtrif;</a>
          <!--<ul class="side-from-1">
                                                        <li><a href ="#" class="third"> A00100 Test</a></li>
                                                        <li>              <a href ="#"> XXXXXX</a></li>
                                                        <li> <a href ="#" class="last"> XXXXXX</a></li>
                                                        </ul>-->
        </li>
        <li><a href="#"> A01 Documentation &rtrif;</a></li>
        <li><a href="#"> A03 Servicing &rtrif;</a></li>
        <li><a href="#"> A05 General &rtrif;</a></li>
        <li><a href="#"> A07 Testing &rtrif;</a></li>
        <li><a href="#" class="last"> A08 Testing &rtrif;</a></li>
      </ul>
    </li>
  </ul>
</nav>