Моя кнопка переключения/сброса не работает на мобильном телефоне правильно

Question

Чтобы кратко описать концепцию, я делаю сайт с фильтруемым списком, используя isotope. У меня есть 3 основных категории фильтров, разделенных 3 вкладками. Я создал тумблер, который по щелчку отключает вкладку расстояния и ее содержимое (скрипт, который я нашел в другом вопросе stackoverflow). Единственное, что мне нужно, это также вызвать сброс фильтров.

Итак, я объединил это с этим скриптом (see here). Теперь, похоже, правильно работает на рабочем столе, но всякий раз, когда я тестирую iOS Safari или Chrome, я должен дважды нажимать каждый раз, прежде чем он скрывает содержимое области &, перепутав состояние переключения. Я боролся с этим. Вот link to my demo. Заметьте, я использую fastclick js, но включение/выключение не похоже на что-либо. Может быть, это css и проверенное свойство? Любая помощь приветствуется. Вот мой код ниже.

JS

// toggle function 
jQuery.fn.clickToggle = function(a,b) { 
    var ab = [b,a]; 
    return this.on("click", function(){ ab[this._tog^=1].call(this); }); 
}; 

// script for isotope filter reset 
var $anyButtons = $('.filters').find('button[data-filter=""]'); 
var $buttons = $('.filters button'); 

// button for toggle switch, this should reset filters and hide the distance tab 
$('.onoffswitch ').on('click', function() { 
    // reset filters 
    filters = {}; 
    $grid.isotope({ filter: '*' }); 
    // reset buttons 
    $buttons.removeClass('is-checked'); 
    $anyButtons.addClass('is-checked'); 

$(".onoffswitch ").clickToggle(function() { 
     $("#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 

}); 

CSS

/*toggle switch for non-uptowners*/ 
.onoffswitch-container { 
    padding: 20px 20px 0px 30px; 
} 

.location-off { 
    display: none !important; 
} 
.onoffswitch { 
    position: relative; width: 49px; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; user-select: none; 
    -moz-transition: all 0.1s ease-in; 
    -o-transition: all 0.1s ease-in; 
    transition: all 0.1s ease-in; 
} 

.onoffswitch:active { 
    -moz-animation: rubberBand .5s; 
    -webkit-animation: rubberBand .5s; 
    animation: rubberBand .5s; 

} 
.onoffswitch-checkbox { 
    display: none; 
} 
.onoffswitch-label { 
    display: block; overflow: hidden; cursor: pointer; 
    height: 22px; padding: 0; line-height: 22px; 
    border: 2px solid #ff3947; border-radius: 22px; 
    background-color: #ff3947; 
    -moz-transition: all 0.1s ease-in; 
    -o-transition: all 0.1s ease-in; 
    transition: all 0.1s ease-in; 
} 
.onoffswitch-label:before { 
    content: ""; 
    display: block; width: 22px; margin: 0px; 
    background: #d50000; 
    position: absolute; top: 0; bottom: 0; 
    right: 25px; 
    border: 2px solid #ff3947; border-radius: 22px; 
    -moz-transition: all 0.1s ease-in; 
    -o-transition: all 0.1s ease-in; 
    transition: all 0.1s ease-in; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label { 
    background-color: #ffffff; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before { 
    border-color: #ffffff; 

} 
.onoffswitch-checkbox:checked + .onoffswitch-label:before { 
    right: 0px; 
} 

HTML

<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>   

Answer 1

Так что, я думаю, что я понял это. Я, должно быть, пропустил скобок или что-то в первый раз, когда я попробовал, но мне нужно взять функцию 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