javascript - 在 IE11 和 Edge 中单击时向 DOM 元素添加类时出现问题

Question

所以我目前正在 ASP.NET MVC 中处理这个元素，愚蠢的我一直在制作它并且只针对 Chrome(它恰好是我的默认浏览器)进行测试。

一旦我将它发布到我的测试服务器上，就会有很多“不完美”，但其中大部分已经被排序。

我现在遇到一个问题，按钮面板会展开以显示一些信息。它在 Chrome 中运行良好，奇怪的是它有时在 IE11 和 Edge 中的某些元素上运行。外观上也有区别:

IE11 和边缘 Chrome

Chrome 打开

正如您在 IE 和 Edge 图片中看到的那样，在显示包含该滚动条的 div 之前，它已经显示了滚动条。第二张图片是我希望它在点击之前在 IE/Edge 中的样子，第三张图片是点击之后的样子。正如我所说，它在 chrome 中工作。

// The javascript to trigger the on click:

$("body").on('DOMSubtreeModified', function () {
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
            }
        });
    }
});

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active 
class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 0px;
    background-color: white;
    max-height: 0;
    overflow: scroll;
    transition: max-height 0.2s ease-out;
    -webkit-transition: max-height 0.2s ease-out;
    -moz-transition: max-height 0.2s ease-out;
    -o-transition: max-height 0.2s ease-out;
    overflow-y: hidden
}

.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
    margin-top: 7px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-lg-12" id="noPadding">
    <button class="accordion defaultSubtextHeader"><b>Show data</b></button>
    <div id="log_data" class="panel lightGreyBackground">
        <div class="col-md-12 col-lg-12" id="flowbenchTestBox">
            <table border="1">
                <tr>
                    <th class="thCenterText">Interneal Number</th>
                    <th class="thCenterText">Created</th>
                    <th class="thCenterText">Changed</th>
                    <th class="thCenterText">Minimum Battery Level</th>
                </tr>

                @if (sigfoxData != null)
                {
                    <tr>
                        <td align="center" id="minorTextPadding">@sigfoxData.InternalNumber</td>
                        <td align="center" id="minorTextPadding">@sigfoxData.Created</td>
                        <td align="center" id="minorTextPadding">@sigfoxData.Changed</td>
                        <td align="center" id="minorTextPadding">@sigfoxData.MinimumBatteryLevel</td>
                    </tr>
                }
            </table>
        </div>

        <div class="col-lg-12" style="height:15px;"></div>
    </div>
</div>

css 是我在网上找到的，如果我能记住它，我会链接到原始文件，但我记不住了。

知道它为什么会这样吗？尝试将 IE11 浏览器修复程序添加到 App_Browsers，这解决了其他“美观”问题。

希望这里有人能帮助我。我已经尝试了我能找到的东西，但到目前为止似乎没有任何效果。这部分在本地和服务器上运行时都是一个问题。服务器正在运行 .net 4.0，我现在无法升级它。

谢谢。

编辑:只是想指出我在一个页面上有 4-6 个这样的东西，也许其中有 1-2 个可以工作？因此，这可能是因为在呈现所有元素之前加载了 javascript，因为它们是交错的，因为它们是从 sql server 加载的。

Edit2:只需根据评论添加完整的部分 View - 并且不想弄乱可运行的代码示例。

@{
var sigfoxData = ViewBag.Sigfox;
}

<h1 class="defaultHeaderFont">Sigfox</h1>
@if (sigfoxData != null)
{
    <div class="col-md-12 col-lg-12" id="noPadding">
        <button class="accordion defaultSubtextHeader"><b>Show data</b>    
</button>
        <div id="log_data" class="panel lightGreyBackground">
            <div class="col-md-12 col-lg-12" id="flowbenchTestBox">
                <table border="1">
                    <tr>
                        <th class="thCenterText">Interneal Number</th>
                        <th class="thCenterText">Created</th>
                        <th class="thCenterText">Changed</th>
                        <th class="thCenterText">Minimum BatteryLevel</th>
                    </tr>

                    @if (sigfoxData != null)
                    {
                        <tr>
                        <td align="center" id="minorTextPadding">
                            @sigfoxData.InternalNumber
                        </td>
                        <td align="center" id="minorTextPadding">
                            @sigfoxData.Created
                        </td>
                        <td align="center" id="minorTextPadding">
                            @sigfoxData.Changed
                        </td>
                        <td align="center" id="minorTextPadding">
                            @sigfoxData.MinimumBatteryLevel
                         </td>
                        </tr>
                    }
                </table>
            </div>

            <div class="col-lg-12" style="height:15px;"></div>
        </div>
    </div>

}
else
{
    @Html.Partial("_EmptyTestView")
}

Answer 1

正如您的 JavaScript 所暗示的，额外的 HTML 将被动态加载。在这种情况下，您应该在祖先元素上使用 JQuery 的事件委托(delegate) .on('event', 'selector', handlerFunc) 而不是观察 DOM。

此外，使用 DOMContentLoaded 事件始终是个好主意，即 JQuery 速记 $(function(){})。

另请注意，您正在使用多个相同的 ID，但是，HTML 规范规定每个文档的 ID 必须是唯一的。我已将其更改为 class。

// The javascript to trigger the on click:

$(function()
{
  $('body').on('click', 'button.accordion', function ()  {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight)
    {
      panel.style.maxHeight = null;
    } else
    {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
});

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active 
class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 0px;
    background-color: white;
    max-height: 0;
    overflow: scroll;
    transition: max-height 0.2s ease-out;
    -webkit-transition: max-height 0.2s ease-out;
    -moz-transition: max-height 0.2s ease-out;
    -o-transition: max-height 0.2s ease-out;
    overflow-y: hidden
}

.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
    margin-top: 7px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-lg-12" id="noPadding">
  <button class="accordion defaultSubtextHeader"><b>Show data</b></button>
  <div id="log_data" class="panel lightGreyBackground">
    <div class="col-md-12 col-lg-12" id="flowbenchTestBox">
      <table border="1">
        <tr>
          <th class="thCenterText">Interneal Number</th>
          <th class="thCenterText">Created</th>
          <th class="thCenterText">Changed</th>
          <th class="thCenterText">Minimum Battery Level</th>
        </tr>
  
        <tr>
          <td align="center" class="minorTextPadding">Example InternalNumber</td>
          <td align="center" class="minorTextPadding">Example Created</td>
          <td align="center" class="minorTextPadding">Example Changed</td>
          <td align="center" class="minorTextPadding">Example MinimumBatteryLevel</td>
        </tr>
  
      </table>
    </div>
  
    <div class="col-lg-12" style="height:15px;"></div>
  </div>
</div>