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

【问题标题】：buttons and toggle switch does not work in mobile browser按钮和切换开关在移动浏览器中不起作用
【发布时间】：2018-06-28 16:42:50
【问题描述】：

我使用 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 解决方案吗？我应该做出哪些改变？这段代码出了什么问题？

【问题讨论】：

标签： javascript html css mobile

【解决方案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，一定要测试正确的东西。

【讨论】：