Question

我的页面顶部有一个过滤器行。单击时，给定的过滤器会过滤结果，并突出显示（特定类）。再次单击时，应清除该类，并在视觉上取消选择过滤器。

这在桌面上工作正常，但在移动设备上，当我点击时，过滤器被正确选择（并且结果被正确过滤），但是当我再次单击时，过滤器保持选中状态，打破了用户体验。如果我再次点击其他内容，过滤器将完全取消选中，只需点击一下即可... ...

可能有什么不对？我也试过安装ngTouch模块，但似乎没有改变任何东西。

HTML：

section.filter-area
  .col-xs-3.filter-row(ng-repeat="flt in vm.filters")
    .filter(ng-click="vm.filter(flt)" ng-class="{'selected': flt.isSelected}")
      .filter-title {{flt.tag}}
      .filter-icon
        img.filters(src="{{flt.icon}}")

JS：

'use strict';

Controller.$inject = ['$http'];

function Controller($http) {
      /* other stuff */
      vm.filter = function(flt) {
      if (flt.isSelected === undefined) {
        flt.isSelected = false;
      }

      flt.isSelected = !flt.isSelected;

      if (flt.isSelected) {
        activeFilters += 1;        
        filterProducts(flt);
      } else {
        activeFilters -= 1;
        unselectFilter(flt);
      }
    }
}

Answer 1

这是一个有冲突的CSS条目。

我有相同的悬停和选择规则，这会导致移动设备发生冲突，因为移动设备不支持悬停。

.filter:hover, .filter:selected {
   background-color: #ccc;
   color:white;
}

因此，我在媒体查询中移动了悬停规则，并应用了此解决方案 https://stackoverflow.com/a/6262682/169252

为了支持任何触控设备。

使用ng-click切换可在桌面上进行，但不能在移动设备上进行切换

1 个答案: