【发布时间】：2018-04-09 05:44:59
【问题描述】：
我在使用 Internet Explorer 向我的代码添加样式标签时遇到问题。 Chrome 工作正常，不会添加这段额外的代码。当用户在 SharePoint 中编辑页面（这是一个包含常见问题解答等手风琴的页面）时，他们发现他们无法打开手风琴部分进行编辑。当用户在 Chrome 中尝试相同的操作时，默认情况下所有部分都是打开的，他们可以编辑手风琴，这是它应该如何工作的。有谁知道为什么 Internet Explorer 会添加不同的标签？
它添加了这个<div class="panel2 accordioncollapse" style="display: none;">，因为面板无法访问，所以它会填满所有内容以供编辑。
$(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 'Metropolis of the Future'. 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>【问题讨论】：
-
你的意思是
it adds a style attribute to the div -
你能通过 w3org 的验证器运行你的页面吗？
-
我无法重现该行为。在 IE11 和 Edge 上测试，一目了然。您使用的是哪个版本的 Internet Explorer？
style="display: none;"是使用hide()jQuery 函数时的预期属性。
标签： javascript html css internet-explorer