toggleClass在IE或Edge中不起作用

Question

我有一个jquery，当点击它时会扩展隐藏的文本选择它也会更改下拉箭头以便在单击时面向另一个方向。

这是一个例子 -

 $(document).ready(function(){ $(".toggle-1").click(function(){ $("#div-1").toggle(1000); $("#arrow-1").toggleClass("up"); }); }); $(document).ready(function(){ $(".toggle-2").click(function(){ $("#div-2").toggle(1000); $("#arrow-2").toggleClass("up"); }); }); 

  body {text-align:center} p {text-align:left} a.toggle-1 {font-size:1.5em;font-weight:bold;text-decoration:none;} a.toggle-1:hover {font-size:1.5em;font-weight:bold;text-decoration:underline;} a.toggle-2 {font-size:1.5em;font-weight:bold;text-decoration:none;} a.toggle-2:hover {font-size:1.5em;font-weight:bold;text-decoration:underline;} .arrow:after {font-weight:bold; content:" ⮛";} .arrow.up:after {font-weight:bold; content:" ⮙";} #div-1 {display:none} #div-2 {display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Welcome</h2> <a class="toggle-1" href="javascript:void(0)">Click Here<span id="arrow-1" class="arrow"></span></a> <div id="div-1"> <p>Proin ultricies dolor dapibus, ornare dolor sed, commodo lectus. Suspendisse aliquet placerat ante et elementum. Fusce eleifend erat sit amet massa sollicitudin sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae diam eget nisi fringilla vehicula. Integer ac ipsum tincidunt, imperdiet risus et, viverra sem. Suspendisse urna erat, interdum sed justo vitae, aliquet viverra arcu. Curabitur in vulputate dolor. Proin neque nunc, condimentum id sollicitudin ac, vehicula eu neque. Morbi pharetra sagittis erat non pellentesque. Nullam quis blandit ex, vitae dapibus nibh. Nullam porttitor velit nisi, at dictum tortor dictum a.</p> </div> <div style="clear:left;margin-top:50px;margin-bottom:50px"></div> <a class="toggle-2" href="javascript:void(0)">Click Here too!<span id="arrow-2" class="arrow"></span></a> <div id="div-2"> <p>Morbi ut rhoncus mauris, nec vestibulum eros. Aenean tincidunt consectetur lacus at ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur quis accumsan leo. Nam in leo ex. Quisque quis porttitor quam, non porttitor lacus. Proin eget nisl libero. Suspendisse efficitur pretium neque sed rhoncus. Proin hendrerit efficitur mi vitae ullamcorper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nec lorem pretium, venenatis tortor id, imperdiet lorem. Praesent maximus ipsum ante, scelerisque malesuada mauris cursus ut. Pellentesque nunc massa, varius vel egestas sed, mollis eget lorem. Etiam tempor luctus faucibus. Phasellus fringilla vel augue ornare gravida.</p> </div> 

代码似乎工作正常，但只有我使用Firefox或Chrome。

每次我尝试使用Microsoft Edge或IE时，div都会扩展，但是类切换不起作用，我在这里缺少什么？

Answer 1

您需要以这两种值不具有相同模式的方式定义content ：

例如：

.arrow:after {content:"⮛";} 
.arrow.up:after {content:" ⮙";}

在上述任何一个content值之前添加一个空的空格字符也可以使它在IE浏览器中工作。

在你的代码中，你在两种情况下都有空格，因为相同数量的空格（相似的模式）它不起作用。

我不确定IE这种行为背后的原因。 可能是它的一个bug或其他东西，但这样做会使它在IE浏览器中工作。

 $(document).ready(function(){ $(".toggle-1").click(function(){ $("#div-1").toggle(1000); $("#arrow-1").toggleClass("up"); }); }); $(document).ready(function(){ $(".toggle-2").click(function(){ $("#div-2").toggle(1000); $("#arrow-2").toggleClass("up"); }); }); 

 body {text-align:center} p {text-align:left} a.toggle-1 {font-size:1.5em;font-weight:bold;text-decoration:none;} a.toggle-1:hover {font-size:1.5em;font-weight:bold;text-decoration:underline;} a.toggle-2 {font-size:1.5em;font-weight:bold;text-decoration:none;} a.toggle-2:hover {font-size:1.5em;font-weight:bold;text-decoration:underline;} .arrow:after {font-weight:bold; content:"⮛";} .arrow.up:after {font-weight:bold; content:" ⮙";} #div-1 {display:none} #div-2 {display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Welcome</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor felis dui, nec hendrerit erat condimentum non. Sed orci eros, volutpat vitae nisi et, auctor sodales libero. Maecenas dignissim augue eget orci euismod, eu maximus felis vehicula. Etiam ut elit pharetra, gravida metus at, lacinia sapien. Aliquam non est ut dui dictum hendrerit. Cras condimentum ante purus. Vivamus volutpat vel mauris vel molestie. Nulla nec fringilla enim. Nunc sed mi eleifend, viverra mi at, pretium nibh. Aliquam erat volutpat. Ut at dapibus mauris. Morbi volutpat vitae lacus ut tempor. Aliquam erat volutpat. Nullam et lectus feugiat, tempor nunc et, aliquam augue.</p> <a class="toggle-1" href="javascript:void(0)">Click Here<span id="arrow-1" class="arrow"></span></a> <div id="div-1"> <p> Proin ultricies dolor dapibus, ornare dolor sed, commodo lectus. Suspendisse aliquet placerat ante et elementum. Fusce eleifend erat sit amet massa sollicitudin sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae diam eget nisi fringilla vehicula. Integer ac ipsum tincidunt, imperdiet risus et, viverra sem. Suspendisse urna erat, interdum sed justo vitae, aliquet viverra arcu. Curabitur in vulputate dolor. Proin neque nunc, condimentum id sollicitudin ac, vehicula eu neque. Morbi pharetra sagittis erat non pellentesque. Nullam quis blandit ex, vitae dapibus nibh. Nullam porttitor velit nisi, at dictum tortor dictum a. Donec eu consequat ex, eu dapibus lectus. Suspendisse sit amet sapien sed quam mollis condimentum. Maecenas ullamcorper volutpat facilisis. Sed eget porta purus, ac fermentum erat. Cras tincidunt, mi vel scelerisque consectetur, ligula urna scelerisque justo, quis commodo tellus purus sit amet velit. Nam accumsan, odio ut ullamcorper luctus, nisi risus iaculis massa, a mollis ante eros vel nibh. Sed et orci tincidunt, suscipit erat non, rutrum urna. </p> </div> <div style="clear:left;margin-top:50px;margin-bottom:50px"></div> <a class="toggle-2" href="javascript:void(0)">Click Here too!<span id="arrow-2" class="arrow"></span></a> <div id="div-2"> <p> Morbi ut rhoncus mauris, nec vestibulum eros. Aenean tincidunt consectetur lacus at ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur quis accumsan leo. Nam in leo ex. Quisque quis porttitor quam, non porttitor lacus. Proin eget nisl libero. Suspendisse efficitur pretium neque sed rhoncus. Proin hendrerit efficitur mi vitae ullamcorper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nec lorem pretium, venenatis tortor id, imperdiet lorem. Praesent maximus ipsum ante, scelerisque malesuada mauris cursus ut. Pellentesque nunc massa, varius vel egestas sed, mollis eget lorem. Etiam tempor luctus faucibus. Phasellus fringilla vel augue ornare gravida. Praesent lobortis in lacus at bibendum. Sed sed condimentum nibh, vitae molestie velit. Ut convallis ex leo, non congue mauris faucibus vel. Morbi dictum aliquam purus, at blandit magna commodo nec. Mauris euismod ipsum magna, sit amet tempor sem interdum vitae. Maecenas ac urna enim. Aliquam elementum velit quis tortor ornare, eget eleifend sapien facilisis. Mauris euismod lectus a placerat dictum. Ut pellentesque imperdiet magna eget ultrices. Duis auctor lorem at nulla ultricies finibus. Mauris sagittis placerat est et lobortis. Nulla placerat convallis erat, in consequat est dignissim vel. Ut aliquet nisi quam, et pretium sem tempor hendrerit. Nam venenatis sapien in porttitor molestie. Curabitur vel massa vel tellus euismod gravida in ornare urna. Morbi hendrerit nisi ut odio ultrices, eget lobortis mauris euismod. Maecenas rhoncus finibus dictum. Donec quis augue sed elit aliquam varius. Vestibulum placerat feugiat risus at porttitor. Phasellus vel imperdiet massa, et porta justo. Nunc interdum justo at vehicula vehicula. Proin ut turpis imperdiet, luctus orci a, convallis turpis. Morbi pellentesque metus a mi volutpat, faucibus accumsan turpis congue. Proin rutrum, libero non lacinia eleifend, neque eros aliquet ex, eu sagittis augue purus eget nulla. Quisque placerat lacus vitae libero pretium, nec ultrices quam efficitur. Sed lobortis risus id semper aliquam. Sed finibus nibh maximus, lobortis neque fermentum, pulvinar ex. Cras finibus metus a nunc pellentesque venenatis vel bibendum sapien. Vestibulum laoreet est a arcu tempor pellentesque. Quisque sit amet quam felis. Phasellus lacus sapien, pulvinar vel vulputate sed, molestie non turpis. Donec at placerat leo, vel auctor enim. Maecenas accumsan ex in neque sodales, pretium malesuada nunc ullamcorper. Donec pharetra, diam ac congue ultrices, nibh tellus fringilla magna, sed vehicula eros ligula sed mauris. Nam elementum scelerisque vehicula. Curabitur condimentum mi ut velit auctor, id cursus ante condimentum. Cras iaculis mattis dignissim. Nullam fringilla imperdiet ante, at luctus ipsum accumsan vel. In pharetra odio et dapibus consectetur. Donec vel euismod tortor. Maecenas vitae facilisis orci. Curabitur orci turpis, pulvinar sit amet justo accumsan, vulputate lacinia dolor. </p>