如果用户已登录，如何隐藏按钮（SVG 图标）？

开发
1

您好。我该如何隐藏一个按钮（实际上是一个链接到某处的 SVG 图标），但仅当有人登录账户时才隐藏？

1 个赞
2

您可以使用 .anon 类，并进行类似如下的操作：

2 个赞
3

您的 <html> 标签上附加了一个 anon 类。

因此，您可以使用如下方式：

html:not(.anon) .your_svg_selector {
   display: none;
}
2 个赞
4

@omarfilip @Arkshine 这将只隐藏已登录用户的此图标吗？另外，那个 anon 类具体在哪里？我好像找不到。

5

是的。

image
image1219×208 15.8 KB

6

啊，抱歉——你想要反过来，所以是：not(.anon)

3 个赞
7

哈哈，我也完全看错了，我的错！

8

哦，所以它必须以某种方式手动添加？我的只有：
class="desktop-view not-mobile-device text-size-normal no-touch discourse-no-touch"

9

无需添加任何内容。如果您未登录，Discourse 会自动应用“anon”类。因此，您可以编写 CSS 来表示“如果不存在 anon 类…”。

1 个赞
10

这是所有链接到我想隐藏的图标的东西。这里的“选择器”是哪一部分？ :open_mouth:

cccc
cccc883×190 10 KB

11

是的，您需要自定义站点的 CSS：

2 个赞
12

@45thj5ej .header-icon-login .d-icon-user 应该可以。

1 个赞
13

好的，很酷，我只需要把它放在我的 CSS 代码中吗？

HTML:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}
1 个赞
14 
html:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}

您可以将其放入主题 CSS（如果可用）中，或者更好的是，将其放入附加到主题的主题组件 CSS 中。

1 个赞
15

啊，糟糕。所以，它奏效了，但当它隐藏时，它不会将旁边的图标滑动过来，所以有一个奇怪的间隙。有没有办法在没有间隙的情况下做到这一点，但又不改变图标的顺序？
yyyy

1 个赞
16

试试这个，以包含 <li>。

html:not(.anon) .header-icon-login  {
   display: none;
}
4 个赞
17

哥们，非常感谢你。 :pray:

2 个赞
18

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.