选择其他元素时更改 CSS 属性

Question

我有一种网上商店，当用户在移动设备上选择过滤器时，我希望过滤器按钮有边框 - 这样用户就会知道他们应用了一些过滤器。分别地，当应用 none 个过滤器时，我希望按钮回到正常的无边框状态。

我能做到：

@include mobile {
    border: solid;
}

但是这样一来，边框就会一直出现，这不是我想要的。可以选择的过滤器位于另一个 .scss 文件和文件夹中，所以我不能 (?) link 它们到我正在处理的这个文件中。那么有什么方法可以使用 CSS/SASS 实现此目的，还是我必须在此处应用一些 JS？

Answer 1

好的，所以您需要做的是检测您是否至少应用了一个过滤器。这需要一些 javascript 条件。

如果条件 returns 为真（在您的情况下意味着选择了一些过滤器），您必须向过滤器按钮添加 CSS class 才能实现有边界。最初，您的过滤器按钮不应该有任何过滤器，因为我们假设用户开始导航时没有过滤器。

例如这里有一些 scss:

    .filter-button{
         border:1px solid transparent; /* has a transparent border*/
         transition: border 0.3s ease-in-out; /*adds a cool transition when you 
         add the has-filters class*/
         &.has-filters{
         /*when the condition if (filters_exist) returns true, you add this class to 
          the HTML filter button which has the class .filter-button*/
          border:1px solid blue;
         }
     }

选择其他元素时更改 CSS 属性

Change CSS property when other element is selected

css

mobile

sass