# Composer 类别选择器中子分类优先
**URL:** https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756
**Category:** Development
**Created:** [2023年十二月15日 01:55 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756 "2023-12-15T01:55:57Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2023年十二月15日 01:55 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/1 "2023-12-15T01:55:58Z")
我们的用户在主题撰写器中根据子类别选择相关类别 - 这意味着他们必须记住他们想要使用的子类别所属的类别才能找到它。
是否可以更改类别选择器中类别的显示方式，以便子类别和类别互换位置（子类别在前）？
例如 - 用户想要发布一个关于治理的主题。理想情况下，类别下拉菜单应显示“治理 - 管理”（并且列表按子类别排序）。
选择后，它将在撰写器中显示为“治理 - 管理”。
谢谢。
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十二月15日 03:07 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/2 "2023-12-15T03:07:29Z")
一个快速的 CSS 解决方案可以是以下内容。将其放入您的主题或组件 CSS 中。
它会将类别 → 子类别反转为子类别 → 类别：
```css
// 将位置从“类别 -> 子类别”反转为“子类别 -> 类别”
.select-kit .select-kit-row.category-row .category-status,
#reply-control .category-input .category-chooser .selected-name .name {
flex-direction: row-reverse;
}
// 选择子类别时隐藏父类别
#reply-control .category-input .category-chooser .selected-name .name {
& > .badge-category__wrapper:first-child {
display: none;
}
& > .badge-category__wrapper:last-child {
display: unset;
}
}
```
---
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2023年十二月15日 08:14 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/3 "2023-12-15T08:14:13Z")
你真是个巫师——非常感谢！
有没有办法让作曲家在下拉列表中优先显示子类别而不是类别（一旦选中），或者更好的是，只显示子类别（类别“trail”仅出现在下拉列表中）？
---
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2023年十二月15日 13:45 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/4 "2023-12-15T13:45:17Z")
经过一些试错，我认为我正在取得进展：
```css
span.name .badge-wrapper:first-child {
display: none;
}
```
但是，如果选项只有类别而没有子类别（在这种情况下需要显示类别），它将不起作用 - 我会继续尝试。
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2023年十二月15日 14:36 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/5 "2023-12-15T14:36:47Z")
Arkshine 的建议有什么问题？
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十二月15日 14:47 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/6 "2023-12-15T14:47:46Z")
@martyn_thomas 我更新了上面的帖子。你思路是对的。当没有子类别时，它缺少一个恢复 `display` 的规则。（基本上，解决方案是始终隐藏第一个元素并取消设置第二个元素）
---
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2023年十二月15日 14:48 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/7 "2023-12-15T14:48:21Z")
没什么——它运行得很完美，我并不是想从选定的下拉列表中隐藏类别——基本上是想让我的编辑器看起来漂亮。
---
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2023年十二月15日 16:53 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/8 "2023-12-15T16:53:59Z")
> [@Arkshine](#):
>
> ```plaintext
> // Reverses position from "category -> sub-category" to "sub-category -> category"
> .select-kit .select-kit-row.category-row .category-status,
> #reply-control .category-input .category-chooser .selected-name .name {
> flex-direction: row-reverse;
> }
>
> // Hides the parent category when a sub-category is selected
> #reply-control .category-input .category-chooser .selected-name .name {
> > .badge-category__wrapper:first-child {
> display: none;
> }
>
> > .badge-category__wrapper:last-child {
> display: unset;
> }
> }
>
> ```
第一部分（翻转子类别和类别）有效，但第二部分无效 ☹
我将在周末尝试一下，看看是否能弄明白。感谢您的帮助——我欠您一杯圣诞啤酒。
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十二月15日 17:14 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/9 "2023-12-15T17:14:54Z")
我不确定。正如您在屏幕截图中看到的，在我这边是有效的。🤔
另外，这是我测试论坛的视频：
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2023年十二月15日 17:27 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/11 "2023-12-15T17:27:53Z")
对我来说也奏效（而且让地方更整洁、更合乎逻辑，因为我们只对一个类别感兴趣，而不是它的路径——父类别在这里并不重要）
谢谢你们两位。
---
### Author:  [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2023年十二月15日 22:29 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/12 "2023-12-15T22:29:11Z")
搞定了：
在 3.1 版本中是这样的：
```plaintext
#reply-control .category-input .category-chooser .selected-name .name {
> .badge-wrapper:first-child {
display: none;
}
> .badge-wrapper:last-child {
display: unset;
}
}
```
感谢大家的帮助！
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2023年十二月16日 00:12 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/13 "2023-12-16T00:12:23Z")
我想，如果你没有太多没有子类别的类别，你也可以使用一个条件。
例如，如果类别不是 cat1、Cat2，那么你的代码将隐藏主类别，使其不出现在作曲家中。
反之，如果类别是 catX、CatY，则使用你的代码。
在创建组件时，我们需要将此代码放在哪里？
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2024年一月15日 00:12 UTC](https://meta.discourse.org/t/sub-categories-first-in-composer-category-selector/288756/14 "2024-01-15T00:12:48Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.