如果选择了一个类别，如何在产品树中隐藏其他类别

Posted 2023-05-09

【中文标题】如果选择了一个类别，如何在产品树中隐藏其他类别

【英文标题】：How to hide other categories in product tree if one category is selected

【发布时间】：2013-03-16 03:02:59

【问题描述】：

购物车有类似的产品类别树

Category1
  Subcategory11
  Subcategory12
  ...
Category2
  Subcategory21
  Subcategory22
  ...
Category3
  Subcategory31
  Subcategory32
  ...

它被放置在屏幕的左侧。 最初它以折叠形式显示

截图1：

Toggle show all categories
Category1
Category2
Category3

用户可以通过点击打开一些节点。在这种情况下（例如在 Category2 中单击）其他类别应从屏幕中删除，以便仅此类别及其子类别可见：

截图2：

Toggle show all categories
Category2
  Subcategory21
  Subcategory22

Toggle show all categories 链接应切换单个类别和类别列表视图：第一次单击应再次显示折叠的类别列表，如屏幕截图 1。之后再次单击Toggle show all categories 应该只显示最后打开的类别，如屏幕截图2。 这是在http://www.officeday.ee/Buroo-pohitoovahendid/中实现的

如何实现这个？是否有一些 jquery 或 jquery-ui 插件，或者 jqgrid 可以为此定制吗？

如果选择了某个类别，我发现的所有树都会离开主类别列表，例如

Category1
Category2
  Subcategory21
  Subcategory22
Category3

如截图2所示，如果选择了Category2，Category1和Category3必须消失

目前使用 ASP.NET/Mono MVC2、jquery、jquery-ui 和 jqgrid treegrid。如果这导致解决方案，jquery-ui 和 jqgrid 可以替换为其他内容。

【参考方案1】：

为类别提供一个通用类，例如 .hidden 和 commonClass

hiddendisplay:none

$('.category').click(function()
 $(this).css('display','block')
 $('.commonclass').addClass('hidden')

);

类似的东西你可以试试……

【讨论】：

这也隐藏了活动类别。如何保持活动类别可见？