jQuery-使用网格/列表视图状态展开/折叠

我试图模拟一个

网格/列表

视图，该视图具有一个

可折叠菜单

，该菜单仅在列表视图中应用，但我的展开/折叠代码当前会影响这两种状态（列表视图和网格视图）

我只想在

列表视图中允许展开/折叠，否则在网格视图中-全部显示。我仍然需要使用
#toggleAll
按钮来处理列表视图项，但是我不知道如何重新设置代码的范围，使其仅在
$（.funded_ulist）.hasglass（“list”）
时应用


$（“查看列表”）。在（“单击”，函数（）{
$（“#列表u log”）.attr（“类”、“资助列表”）；
$（“视图网格”）.removeClass（“视图切换——活动”）；
$（“#视图列表”）.addClass（“视图切换-活动”）；
});
$（“查看网格”）。在（“单击”，函数（）上{
$（“列表日志”）.attr（“类”、“资助列表网格”）；
$（“视图列表”）.removeClass（“视图切换——活动”）；
$（“#视图_网格”）.addClass（“视图#切换-活动”）；
});
if（$（“.funded\u list”）.hasClass（“list”））{
$（“.btn--media”）。单击（函数（）{
$（this）.closest（“.funded\uuuu item”）.find（“.funded\uuuu right”）.toggle（）；
//如果一切都是可见的
如果（$（“.funded\uuu right:可见”）.length==$（“.funded\uu right”）.length）{
$（“#toggleAll”）.text（“折叠”）；
}
//否则，如果一切都是看不见的
else if（$（.funded\u right:hidden”）.length==$（.funded\u right”）.length）{
$（“#toggall”）.text（“展开”）；
}
});
}
$（“#toggall”）。单击（函数（）{
如果（$（this）.text（）=“折叠”）{
$（“.funded_uuright”）.hide（）；
$（此）.text（“展开”）；
}否则{
$（“.funded_uuright”）.show（）；
$（此）.text（“折叠”）；
}
});
*{
框大小：边框框；
}
.视图{
显示器：flex；
}
.view>div{
填充：1.3rem；
}
.view\u切换-激活{
背景：蓝色；
}
.资助名单{
显示器：flex；
弯曲方向：立柱；
}
.列表.资助项目{
宽度：100%；
最小宽度：320px；
}
.list img{
浮动：左；
右边距：20px；
}
.资助项目{
填充：10px；
边缘顶部：20px；
边框：1px实心#ddd；
}
.项目：悬停{
边框：1px实心#aaa；
光标：指针；
}
.隐藏{
显示：无；
}
.list.funded______右{
显示：无；
}
.grid.funded______右{
显示器：flex；
}
.网格按钮{
显示：无
}

网格
列表
扩大
示例文本
扩大
示例文本
扩大
您可以检查div
列表_log
是否有class
列表
根据这一点，您可以限制切换按钮在
网格
视图上工作。此外，单击“列表”
视图时，我添加了条件，如果按钮是“展开隐藏”或“显示<代码>资助的

右侧的div”，因为网格视图将显示所有div

列表日志

，因此如果用户未在列表视图中选择“展开”，此按钮将停止显示或隐藏这些div。如果我理解错误，请原谅

演示代码：

$（“查看列表”）。在（“单击”，函数（）{
$（“#列表u log”）.attr（“类”、“资助列表”）；
$（“视图网格”）.removeClass（“视图切换——活动”）；
$（“#视图列表”）.addClass（“视图切换-活动”）；
$（“.funded\uuuu right”）.text（）=“展开”？$（.funded\uuuu right”）.hide（）：$（.funded\uuuu right”）.show（）；//检查切换文本..显示或隐藏
});
$（“查看网格”）。在（“单击”，函数（）上{
$（“列表日志”）.attr（“类”、“资助列表网格”）；
$（“视图列表”）.removeClass（“视图切换——活动”）；
$（“#视图_网格”）.addClass（“视图#切换-活动”）；
$（“.funded__right”）.show（）；//如果选中网格，则默认显示所有
});
$（“.btn--media”）。单击（函数（）{
//支票部门
if（$（“#list_log”）.hasClass（“list”））{
$（this）.closest（“.funded\uuuu item”）.find（“.funded\uuuu right”）.toggle（）；
//如果一切都是可见的
如果（$（“.funded\uuu right:可见”）.length==$（“.funded\uu right”）.length）{
$（“#toggleAll”）.text（“折叠”）；
}
//否则，如果一切都是看不见的
else if（$（.funded\u right:hidden”）.length==$（.funded\u right”）.length）{
$（“#toggall”）.text（“展开”）；
}
}
});
$（“#toggall”）。单击（函数（）{
//检查list\u log div是否有类list
if（$（“#list_log”）.hasClass（“list”））{
如果（$（this）.text（）=“折叠”）{
$（“.funded_uuright”）.hide（）；
$（此）.text（“展开”）；
}否则{
$（“.funded_uuright”）.show（）；
$（此）.text（“折叠”）；
}
}否则{
//网格显示所有
$（“.funded_uuright”）.show（）；
}
});
*{
框大小：边框框；
}
.视图{
显示器：flex；
}
.view>div{
填充：1.3rem；
}
.view\u切换-激活{
背景：蓝色；
}
.资助名单{
显示器：flex；
弯曲方向：立柱；
}
.列表.资助项目{
宽度：100%；
最小宽度：320px；
}
.list img{
浮动：左；
右边距：20px；
}
.资助项目{
填充：10px；
边缘顶部：20px；
边框：1px实心#ddd；
}
.项目：悬停{
边框：1px实心#aaa；
光标：指针；
}
.隐藏{
显示：无；
}
.list.funded______右{
显示：无；
}
.grid.funded______右{
显示器：flex；
}
.网格按钮{
显示：无
}

网格
列表
扩大
示例文本
扩大
示例文本
扩大