javascript - 如何使用局部 View 展开/折叠 html 表格？

Question

我正在尝试在单击按钮时展开/折叠表格行。目前我只能扩展行。

我也希望能够折叠它。

我正在使用局部 View 。 我试过这个:expand/collapse table rows with JQuery但无法让它工作，因为我在 foreach 循环中从 sql 数据库加载数据。

澄清一下:这扩展了表格，但我遗漏了我的 javascript 代码的折叠部分。提前致谢。

局部 View

<div class="table" id="logtable">
        <div class="row">
            <div class="cell" id="tableth">
                message
            </div>
        </div>

        @foreach (var item in Model.Logs)
        {
            <div class="row">
                <div class="cell" id="tabletd">
                    <input type="button" name="answer" value="Show Div" onclick="showDiv(@item.id.ToString())" />
                    @Html.DisplayFor(modelItem => item.message)
                </div>
            </div>
            <div class="row">
                <div id="@item.id.ToString()" style="display:none;" class="answer_list">
                    <strong>Uri:</strong> @item.Uri <br/>
                    <strong>Method:</strong> @item.Method <br />
                    <strong>HttpStatus:</strong> @item.HttpStatus <br />
                </div>
            </div>

Javascript(在我的 HTML View 中)

<script type="text/javascript">
            function showDiv(message) {
                document.getElementById(message).style.display = "block";
            }
        </script>

Answer 1

你想要切换功能吗？检查元素的状态，然后选择是显示还是隐藏:

<script type="text/javascript">
            function showDiv(message) {
                if(document.getElementById(message).style.display == 'block'){
                    document.getElementById(message).style.display = "none";
                }
                else{
                    document.getElementById(message).style.display = "block";
                }
            }

</script>

严格来说，这是纯 javascript 而不是 jQuery。如果你真的在使用 jQuery，你可以让它更简单:

        function showDiv(message) {
            $('#'+message).toggle();
        }

您甚至可以制作精美的动画:

        function showDiv(message) {
            $('#'+message).slideToggle();

        }