Question

我已经使用CSS创建了此切换开关。它在PC浏览器（chrome和firefox）上都可以正常工作，但是在移动浏览器中却无法正常工作，即，如果我单击开关，它就不会在移动浏览器上打开和关闭之间切换。即使单击按钮，也不会被单击。我读了许多文章，但没有使用javascript解决任何问题。我还研究了ontouch事件，但是当我使用它时，问题仍然存在。

这是拨动开关的css代码：

 <style>
       .switch input { 
        display:none;
    }
    .switch {
        display:inline-block;
        width:37px;
        height:18px;
        margin:8px;
        transform:translateY(50%);
        position:relative;
    }

    .slider {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        border-radius:15px;
        box-shadow:0 0 0 2px #777, 0 0 4px #777;
        cursor:pointer;
        border:4px solid transparent;
        overflow:hidden;
         transition:.4s;
    }
    .slider:before {
        position:absolute;
        content:"";
        width:100%;
        height:100%;
        background:#777;
        border-radius:15px;
        transform:translateX(-15px);
        transition:.4s;
    }

    input:checked + .slider:before {
        transform:translateX(15px);
        background:limeGreen;
    }
    input:checked + .slider {
        box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen;
    }
    </style>

这是用于切换和按钮的html代码：

  <div>
            <label class="switch">
                <input type="radio" name="subject[]" value="Subject-1" id="Check"  onclick="Function()">
                <span class="slider"></span>
            </label>
        </div>

    <div>
            <label class="switch">
                <input type="radio" name="subject[]" value="Others"  id="myCheck"  onclick="Function1()">
                <span class="slider"></span>
            </label>
        </div><br>
        <div id="text" style="display:none">
       <input type="text" class="wp-form-control wpcf7-text" style="border-color:#C0C0C0;" placeholder="Mention which subject you want" name="sub"></div>
        <br>
        <input type="submit" value="Submit" name="submit" class="wpcf7-submit"><br><br>
          </div>

这是onclick函数的javascript部分：

 document.getElementById("myCheck").addEventListener("touchstart", Function);
    function Function() {
         if (document.getElementById('myCheck').checked) {
            document.getElementById('text').style.display = 'block';
        }
        else document.getElementById('text').style.display = 'none';    
    }

对此有任何JavaScript解决方案吗？我应该做些什么改变？这段代码出了什么问题？

Answer 1

您尝试不使用hoisting的原因，不是每个引擎都有效。我建议您将JavaScript更改为：

document.getElementById("myCheck").addEventListener("touchstart", function() {
  if (document.getElementById('myCheck').checked) {
    document.getElementById('text').style.display = 'block';
  }
  else document.getElementById('text').style.display = 'none';    
});

您的html中也有myCheck和Check，请确保测试正确的内容。

按钮和切换开关在移动浏览器中不起作用

1 个答案: