在IE11和Edge中单击时向DOM元素添加类的问题

时间：2019-01-17 13:19:39

标签： javascript html css

因此，我目前正在ASP.NET MVC中从事该项目的工作，可笑的是我一直在做它，并且只对Chrome（它是我的默认浏览器）进行了测试。

一旦我将其发布到测试服务器上，就会出现很多“缺陷”，但是其中大多数已经被整理了。

我现在遇到了问题，按钮面板可以展开以显示一些信息。它在Chrome中非常有效，而奇怪的是，有时它可以在IE11和Edge中的某些元素上运行。外观也有所不同：

IE11和Edge IE11 & Edge 铬 Chrome

Chrome打开 Chrome open

正如您在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：只需按注释添加完整的部分视图-并不想弄乱可运行的代码示例。

@{
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")
}

1 个答案:

答案 0 :(得分：1)

JavaScript暗示，其他HTML将动态加载。在这种情况下，您应该在祖先元素上使用JQuery的事件委托.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>

相关问题
最新问题