Question

因此，为了简要介绍这个概念，我正在使用isotope建立一个带有可过滤列表的网站。我有3个主要类别的过滤器，由3个标签分隔。我创建了一个切换开关，在单击时关闭距离选项卡及其内容（我在另一个stackoverflow问题上找到的脚本）。唯一的问题是，我还需要它来触发过滤器的重置。

所以，我把它和这个脚本（see here）结合起来。现在它似乎在桌面上正常运行，但每当我在 iOS Safari或Chrome 上进行测试时，我每次都要点击两次才能隐藏距离标签＆amp;内容，弄乱了切换状态。我一直在努力。这是一个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

所以，我想我想通了。我第一次尝试时必须错过括号或其他东西，但我需要从click元素中取出clicktoggle功能。

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

我的切换/重置按钮无法在移动设备上正常工作

1 个答案: