Kendo UI 模板加载隐藏元素

Question

我的程序中加载了一个 kendo ui 模板，但我需要隐藏其中一个元素，因此我可以使用按钮将它们切换为隐藏或显示随时。我想使用基本的 jQuery 切换命令，但问题是让元素最初处于正确的状态。谁能帮我初始化 ResultsObjectPartial 并且 ResultsObject 已隐藏和显示？

这是我的模板：

<script type="text/x-kendo-template" id="template">
<div id="details-container">

    <textarea id="ResultsObjectPartial">
        #
            var partialResults;
            Calculation to return a partial result
        #
        #= partialResults #
    </textarea>
    <textarea id="ResultsObject">
        #: ResultObject #
    </textarea>

    <button type="button" id="toggleResults">Full/Partial</button>        
</div>

这是我的 jQuery:

$(document).on("click", "#toggleResults", function (e) {
    $("#ResultsObjectPartial").toggle();
    $("#ResultsObject").toggle();
});

Answer 1

我相信它应该像这样简单：

<textarea id="ResultsObjectPartial" style="display: none">

toggle() 所做的是更改 CSS 显示属性，在最简单的情况下将其设置为 'none'（如果未设置为 'none'，或者删除 'none' 如果是。因此，在您的 html 中将其设置为 'none' 应该会为您提供您所追求的初始状态。

Kendo UI 模板加载隐藏元素

Kendo UI template loading with hidden elements

html

javascript

jquery

show-hide

kendo-ui