Javascript 我的切换/重置按钮在手机上无法正常工作

简单地说，我正在制作一个带有可过滤列表的站点。我有3个主要类别的过滤器，由3个选项卡分隔。我创建了一个切换开关，单击该开关可以关闭距离选项卡及其内容，这是我在另一个stackoverflow问题上找到的脚本。唯一的一件事，我需要它来触发过滤器的重置

所以，我把它和这个脚本结合起来。现在，它似乎在桌面上正常工作，但每当我在iOS Safari或Chrome上测试时，我每次都必须点击两次，然后它才会隐藏距离选项卡和内容，从而扰乱切换状态。我一直在为此奋斗。这是一个例子。注意，我使用的是fastclick js，但打开/关闭它似乎无法修复任何问题。也许是css和checked属性？感谢您的帮助。下面是我的代码

JS

CSS

/*非住宅用户用拨动开关*/ .onoffswitch容器{ 填充：20px 20px 0px 30px； } .地点关闭{ 显示：无！重要； } .ONOFF开关{ 位置：相对；宽度：49px； -webkit用户选择：无；-moz用户选择：无；-ms用户选择：无；用户选择：无； -moz转换：所有0.1秒都容易进入； -o型过渡：所有0.1秒都容易进入； 过渡：所有0.1秒都容易进入； } .ONOFF开关：激活{ -moz动画：rubberBand.5s； -webkit动画：rubberBand.5s； 动画：rubberBand.5s； } .onoffswitch复选框{ 显示：无； } .ONOFF开关标签{ 显示：块；溢出：隐藏；光标：指针； 高度：22px；填充：0；线条高度：22px； 边框：2px实心ff3947；边框半径：22px； 背景色：ff3947； -moz转换：所有0.1秒都容易进入； -o型过渡：所有0.1秒都容易进入； 过渡：所有0.1秒都容易进入； } .ONOFF开关标签：之前{ 内容：； 显示：块；宽度：22px；边距：0px； 背景：d50000； 位置：绝对；顶部：0；底部：0； 右：25px； 边框：2px实心ff3947；边框半径：22px； -moz转换：所有0.1秒都容易进入； -o型过渡：所有0.1秒都容易进入； 过渡：所有0.1秒都容易进入； } .onoffswitch复选框：选中+.onoffswitch标签{ 背景色：ffffff； } .onoffswitch复选框：选中+.onoffswitch标签，.onoffswitch复选框：选中+.onoffswitch标签：之前{ 边框颜色：ffffff； } .onoffswitch复选框：选中+.onoffswitch标签：之前{ 右：0px； } HTML

---

所以，我想我明白了。我第一次尝试它时一定错过了一个括号或其他东西，但我需要将clicktoggle函数从click元素中去掉

    // button for toggle switch, this should reset filters and hide the distance tab
            $(".onoffswitch-checkbox ").clickToggle(function() { 
                // reset filters
                filters = {};
                $grid.isotope({ filter: '*' });
                // reset buttons
                $buttons.removeClass('is-checked');
                $anyButtons.addClass('is-checked');
                 $( "#tab-2, .variable-tab" ).addClass( "location-off" ); // turns off the distance tab & content
                 $( ".default-tab" ).addClass( "active" ); // makes the food style tab the active state
                 $( ".non-active, .variable-tab" ).removeClass( "active" ); // resetting tabs; shows inactive state for other 2
                 $("#tab-1").css({ display: "block" }); // resetting tabs; shows content for food style tab
                 $("#tab-2, #tab-3").css({ display: "none" }); // resetting tabs; hides content for other 2 tabs
            }, function() {
                 $( "#tab-2, .variable-tab" ).removeClass( "location-off" ); // turns on the distance tab & content again
                 $( ".default-tab" ).addClass( "active" );
                 $( ".non-active, .variable-tab" ).removeClass( "active" );
                 $("#tab-1").css({ display: "block" });
                 $("#tab-2, #tab-3").css({ display: "none" });
            }); // Chain here other jQuery methods to your selector

    <div class="onoffswitch-container needsclick">    
        <div class="onoffswitch needsclick">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
            <label class="onoffswitch-label" for="myonoffswitch">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div> 
        THIS IS THE TOGGLE SWITCH, the Distance tab should be switched on &amp; off
    </div>          

    // button for toggle switch, this should reset filters and hide the distance tab
            $(".onoffswitch-checkbox ").clickToggle(function() { 
                // reset filters
                filters = {};
                $grid.isotope({ filter: '*' });
                // reset buttons
                $buttons.removeClass('is-checked');
                $anyButtons.addClass('is-checked');
                 $( "#tab-2, .variable-tab" ).addClass( "location-off" ); // turns off the distance tab & content
                 $( ".default-tab" ).addClass( "active" ); // makes the food style tab the active state
                 $( ".non-active, .variable-tab" ).removeClass( "active" ); // resetting tabs; shows inactive state for other 2
                 $("#tab-1").css({ display: "block" }); // resetting tabs; shows content for food style tab
                 $("#tab-2, #tab-3").css({ display: "none" }); // resetting tabs; hides content for other 2 tabs
            }, function() {
                 $( "#tab-2, .variable-tab" ).removeClass( "location-off" ); // turns on the distance tab & content again
                 $( ".default-tab" ).addClass( "active" );
                 $( ".non-active, .variable-tab" ).removeClass( "active" );
                 $("#tab-1").css({ display: "block" });
                 $("#tab-2, #tab-3").css({ display: "none" });
            }); // Chain here other jQuery methods to your selector