Question

我需要在字段集中创建一个字段集，该字段集可以在单击时展开和折叠我有一些东西有点工作，但当我扩展“扩展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/

的修改
我只是意识到，只要我点击字段集中的任何文本，它就会展开/折叠，但我不希望这样。它应该仅在单击图例时展开/折叠。

Answer 1

尝试将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);
});

http://jsfiddle.net/Delorian/r2xhedek/

级联展开和折叠字段集

1 个答案: