Internet Explorer添加样式标签

Question

I'm having an issue with internet explorer adding a style tag to my code. Chrome works fine and does not add this extra piece of code. When the user goes to edit the page in SharePoint (this is a page that has an accordion for FAQ's etc) they find they can't open the accordion sections to edit. When the user tries the same thing in Chrome all section are open by default and they can edit the accordion which is how it should work. Does anyone know why internet explorer would be adding a different tag?

It adds this <div class="panel2 accordioncollapse" style="display: none;"> which stuffs everything up for editing as the panel can't be accessed.

 $(document).ready(function($) { $('.accordioncollapse').hide(); $('.accordion-toggle').toggleClass('collapsed'); $(".accordion-heading").click(function() { $(this).find('.accordion-toggle').toggleClass('collapsed'); $(this).parent().addClass('active').find('.panel2').slideToggle('fast'); $(".accordion-heading").not(this).parent().removeClass('active').find('.panel2').slideUp('fast'); $(".accordion-heading").not(this).find('.accordion-toggle').removeClass('collapsed'); }); }); 

 .panel1 { width: 60%; margin-left: 20px; } .accordion-default { border-bottom: 1px solid #C8C8C8 !important; } .accordion-heading>a { display: block; line-height: 1.875; font-size: 16px; font-style: normal; font-family: sans-serif; font-weight: bold; text-decoration: none; color: black; padding-top: 18px; padding-bottom: 18px; } .accordion-heading>a:hover, .accordion-heading>a:active, .accordion-heading>a:focus { text-decoration: none; color: #D0006F; } .accordion-body { margin-left: 2px; padding-top: 5px; padding-bottom: 10px; } .accordion-toggle { padding-left: 2px; position: relative; cursor: pointer; text-align: left; } .accordion-toggle::before, .accordion-toggle::after { right: 5px; content: ''; display: block; position: absolute; top: 50%; width: 24px; height: 2px; margin-top: -2px; background-color: #D0006F; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.25s; transition: all 0.25s; } .accordion-toggle::before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 1; } .accordion-toggle.collapsed::before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; text-decoration: none; } .accordion-toggle.collapsed::after { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); text-decoration: none; opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="panel1" id="accordion"> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Test Heading</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> This free event is designed to educate and inspire you about AWS services and help you develop the skills to design, deploy, and operate infrastructure and applications. The event includes two keynote presentations, over 100 educational sessions, and an interactive expo floor showcasing the &#39;Metropolis of the Future&#39;. Join and learn from CloudCheckr and other subject matter experts across the industry. </div> </div> </div> <div class="accordion-default active"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Test 2</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> <a href="https://cloudcheckr.com/event/aws-summit-sydney-2018/?mkt_tok=eyJpIjoiTm1FM01USXpNR1F6TXpVMyIsInQiOiJvcEhjejVCaWI0eFppQXBLdlRVR2hKdXluQTRPU3dZXC83elR5eWhRRUdqSTZpcHhaNmh6S3dDbXA3V3lRKzdLdit2NERlMGF0YWFTaU9GUU0waXJydGpKU1FJYkhhelVcL0NtUVJ3MkE5MGxIMjBxemh4Wlo3RFJQVDdkVHlxaWNxIn0%3D">https://cloudcheckr.com/event/aws-summit-sydney-2018/?mkt_tok=eyJpIjoiTm1FM01USXpNR1F6TXpVMyIsInQiOiJvcEhjejVCaWI0eFppQXBLdlRVR2hKdXluQTRPU3dZXC83elR5eWhRRUdqSTZpcHhaNmh6S3dDbXA3V3lRKzdLdit2NERlMGF0YWFTaU9GUU0waXJydGpKU1FJYkhhelVcL0NtUVJ3MkE5MGxIMjBxemh4Wlo3RFJQVDdkVHlxaWNxIn0%3D</a></div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading3</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #3 </div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading4</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #4 </div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading5</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #5 </div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading6</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #6 </div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading7</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #7 </div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading8</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #8 </div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading9</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #9​ </div> </div> </div> <div class="accordion-default"> <div class="accordion-heading"> <a class="accordion-toggle collapsed">Heading10</a> </div> <div class="panel2 accordioncollapse"> <div class="accordion-body"> Collapsible Content #10 </div> </div> </div> </div> 

Answer 1

I just found out what the issue is - when two users have the page open in edit mode - the second user to open in edit mode gets the closed accordion and can't edit and of the accordion (the accordion sections refuse to open). I guess SharePoint doesn't like two people trying to edit a publishing page? Anyhoo as soon as one of the users discards their checkout the second user can refresh the page and the accordion opens and editing can then be done as per usual! Not sure if this is how it's supposed to work but at least I know why it was acting strange and how to fix it! If anyone knows why this is that would be great to know! Clare