我需要在字段集中创建一个字段集,该字段集可以在单击时展开和折叠 我有一些东西有点工作,但当我扩展“扩展1”时,它也在扩展“扩展1.A”,当它不应扩展“1.A”时 “扩展1”和“扩展1.A”都应该能够独立扩展。 这里有一些非常粗略的代码来展示我想要做的事情。
<div>
<fieldset class="majorpoints">
<legend class="majorpointslegend">Expand 1 [+]</legend>
<div class="hiders" style="display:none">
<ul>
<li>AAA</li>
</ul>
</div>
<fieldset class="majorpoints">
<legend class="majorpointslegend">Expand 1.A [+]</legend>
<div class="hiders" style="display:none">
<ul>
<li>BBB</li>
</ul>
</div>
</fieldset>
</fieldset>
</div>
<div>
<fieldset class="majorpoints">
<legend class="majorpointslegend">Expand 2 [+]</legend>
<div class="hiders" style="display:none">
<ul>
<li>BBB</li>
</ul>
</div>
</fieldset>
</div>
这是使用Jquery的js。
$('.majorpoints').click(function () {
$(this).find('.hiders').toggle();
var legend = $(this).closest('fieldset').children('legend:first');
var value = legend.text();
if (value.indexOf('[+]') >= 0) value = value.replace('[+]', '') + ' [-]';
else value = value.replace('[-]', '') + ' [+]';
legend.html(value);
});
我被允许调用外部JQuery / JS,但我不允许调用外部“CSS”文件
在调试XSL时,这是Visual Studio的限制,超出了问题的范围
在任何人告诉我最好使用JQuery mobile之前,只需将它放在那里,因为它需要外部CSS
以下是我到目前为止所做工作的一个示例
http://jsfiddle.net/ww3sgcaa/
的修改
我只是意识到,只要我点击字段集中的任何文本,它就会展开/折叠,但我不希望这样。它应该仅在单击图例时展开/折叠。
答案 0 :(得分:0)
尝试将JS更改为:
// click event on the legend rather than the fieldset
$('.majorpointslegend').click(function () {
// find the next hider to the legend
$(this).next('.hiders').toggle();
var legend = $(this).closest('fieldset').children('legend:first');
var value = legend.text();
if (value.indexOf('[+]') >= 0) value = value.replace('[+]', '') + ' [-]';
else value = value.replace('[-]', '') + ' [+]';
legend.html(value);
});