展开/折叠嵌套的转发器
我正在尝试实现嵌套转发器，外部转发器显示类别（最初折叠），当用户单击+或 – 内部转发器扩展/折叠时。
我有中继器，但当我点击+两个内部中继器扩展。 我试图动态设置类名，所以只有一个会扩展，但现在它看到我打破了它。
这就是我所拥有的以及我所尝试的（减去不相关的东西）：
<i id="br-plus" class="fa fa-plus-circle" style="color: #3697EA; margin-left: 1%; margin-top: 60px;" data-cat=""> <table class='' style="display: none; margin-top: 10px; font-size: 26px; width: 90%;"> ... 我尝试将数据属性添加到+和 – icons（data-cat），对内部转发器中的表使用相同的类别值（将其类设置为类别名称），并在jQuery中展开和折叠基于哪个加号单击/减去。
当我查看源时，图标具有正确的数据属性（正确的类别缩写），但表的类名称为空。
$(function () { $('#br-plus').on('click', function () {debugger var cat = $('#br-plus').data("cat") //var catID = $('#hfCategoryID').val(); $('.' + cat).toggle(); $(this).hide(); $('#br-minus').show(); }); $('#br-minus').on('click', function () {debugger //var catID = $('#hfCategoryID').val(); var cat = $('#br-minus').data("cat") $('.' + cat).toggle(); $(this).hide(); $('#br-plus').show(); });
更新 – 查看源的结果
$(function() { //$('.courses').hide(); $('#br-plus').on('click', function() { debugger var cat = $(this).data("cat") //var catID = $('#hfCategoryID').val(); $('.' + cat).toggle(); $(this).hide(); $('#br-minus').show(); $(this).siblings().show(); }); $('#br-minus').on('click', function() { debugger //var catID = $('#hfCategoryID').val(); var cat = $(this).data("cat") $('.' + cat).toggle(); $(this).hide(); $('#br-plus').show(); $(this).siblings().hide(); }); $('#net-plus').on('click', function() { $('.courses-net').toggle(); $(this).hide(); $('#net-minus').show(); }); $('#net-minus').on('click', function() { $('.courses-net').toggle(); $(this).hide(); $('#net-plus').show(); }); });
Delivery Operations + -
Network Operations + -
你仍然需要更改$(this).siblings().hide(); to $(this).siblings().show(); 。 这可以让你摆脱$('#br-plus').show(); $('#br-minus').show();
此外，由于你有多个br-plus / br-minus元素，你不能使用id来选择它们，你会想要将它用作一个类：
$('.br-minus').on('click', function() { debugger //var catID = $('#hfCategoryID').val(); var cat = $(this).data("cat") $('.' + cat).toggle(); $(this).hide(); $(this).siblings().show(); });
编辑：我在HeaderTemplate中的嵌套转发器中访问父数据时找到了空白类的解决方案。 为了从内部转发器获取Abbrev ，您需要引用您所在容器的父级。
... ...
一旦你上课了，它应该是这样的：
$(function() { //$('.courses').hide(); $('.br-plus').on('click', function() { debugger var cat = $(this).data("cat") //var catID = $('#hfCategoryID').val(); $('.' + cat).toggle(); $(this).hide(); $(this).siblings().show(); }); $('.br-minus').on('click', function() { debugger //var catID = $('#hfCategoryID').val(); var cat = $(this).data("cat") $('.' + cat).toggle(); $(this).hide(); $(this).siblings().show(); }); $('#net-plus').on('click', function() { $('.courses-net').toggle(); $(this).hide(); $('#net-minus').show(); }); $('#net-minus').on('click', function() { $('.courses-net').toggle(); $(this).hide(); $('#net-plus').show(); }); });
Delivery Operations + - Network Operations + -