Problem adding classes to DOM elements on click in IE11 and Edge

问题: So I'm working on this project currently in ASP.NET MVC, and silly me have been making it and only testing it towards Chrome (Which happens to be my default browser). The...

问题:

So I'm working on this project currently in ASP.NET MVC, and silly me have been making it and only testing it towards Chrome (Which happens to be my default browser).

There was a lot of "imperfections" once i published it to my test server, but most of those have been sorted.

I got a problem now with a button panel that expands to show some information. It works great in Chrome, and the strange thing is it works sometimes on some elements in IE11 and Edge. Also there is a difference in the look:

IE11 & Edge IE11 & Edge Chrome Chrome

Chrome open Chrome open

As you can see in the IE & Edge picture it already shows the scroll bar before the div that holds that one is shown. The second picture is how i want it to look in IE/Edge prior to click and the third picture is what it should look like after. As i said it's working in 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: '2795'; /* 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>

The css is something i found online, and i would link to the original if i could remember it but i cant.

Any idea about why it is behaving like it is? Tried adding IE11 browser fix to App_Browsers, and that sorted the other "beauty" issues.

Hope someone here can help me out. I have tried the things i could find, but nothing so far seems to be working. And this part is an issue both when running locally and on the server. The server is running .net 4.0, and i wont be able to upgrade it at this point in time.

Thanks.

Edit: Just wanted to point out that i have something between 4-6 of these on a page, and maybe 1-2 works out of them? So it might be something with the javascript being loaded before all elements have been rendered since they are staggered because they are loaded from a sql server.

Edit2: Just adding the full partial view as per comment - and dont want to mess up the runnable code example.

@{
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:

As implied by your JavaScript, additional HTML will be loaded dynamically. In this case you should use JQuery's event delegation .on() rather than observing the DOM.

Furthermore it is alway a good idea to use the DOMContentLoaded event, i.e. the JQuery shorthand $(function(){}).

Note also that you are using multiple identical IDs, however, the HTML specs say an ID has to be unique per document. I've changed that into class.

// The javascript to trigger the on click:

$(function()
{
  $('button.accordion').on('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: '2795'; /* 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>

  • 发表于 2019-01-18 18:45
  • 阅读 ( 289 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除