javascript - 呈现页面时会自动添加内联 "display: none;"- 我可以在哪里寻找原因？

Question

我有一个表单元素(复选框)，我已将其添加到 UI 表单中。呈现页面时，Chrome F12 调试器显示 display: none;已添加为样式；即，

element.style {
   display: none;
}

... 可以在 <input> 的 Chrome 调试器的样式 Pane 中看到我表单上的元素。 (事实上​​ ，我什至无法在 Chrome 调试器的“样式” Pane 中取消选中此样式 - 复选标记保持卡住状态 - 即使我可以轻松取消选中其他样式条目。)

这是(我认为是)相关的 HTML:

...
<div class="box">
    ...
    <form id="edit-dish" action="..." method="post">
        <div class="form">
            ...
            <p>
                <input  id="one-label-per-serving"
                        name="ingredient[one_label_per_serving]"
                        type="checkbox"
                        autocomplete="off"
                        class="checkbox checkbox-inline validate[required]"
                        <?php if ( Arr::get($dish, 'one_label_per_serving', FALSE) ): ?>
                            checked="checked"
                        <?php endif; ?> />
                <span class="checkbox-label">One label per serving</span>
            </p>
            ...
        </div>
        ...
    </form>
...
</div>
...

圆点代表我遗漏但我希望和认为不相关的内容。

<span>元素显示得很好。但是，<input>复选框有 display: none;在页面加载后立即添加到其内联样式中。

模板还自动包含边栏、页眉和页脚。

我有一定的信心，其中一个包含的 Javascript 库导致了问题。以下是加载的 Javascript 库(根据 Chrome 的调试器):

jquery.min.js
jquery-ui.min.js
jquery.tmpl.min.js
fileuploader.js
jquery.form.js
jquery.reveal.js
jquery.validationEngine-en.js
jquery.validationEngine.js
jquery.wysiwyg.js
master.v2.js // <-- this is the application's custom script

master.v2.js是应用程序的自定义脚本。在里面搜索，我发现它无处设置 display: none;对于这个元素。

有没有人对可能设置的 Javascript 文件有任何建议 display: none; ，或者如何调试它？

谢谢。

Answer 1

罪魁祸首是对 toggle() 的调用，该调用与应用程序自定义 Javascript 文件中的相关元素相匹配。

正如 @koala_dev 在评论中指出的那样，在搜索可能添加 display: none; 的潜在位置时，搜索 hide() 很重要。但是，搜索 toggle() 也很重要。

我正在回答我自己的问题，以防将来其他人遇到这个问题。