Firefox中的手风琴链接损坏？

在这里编码新手。我一直在尝试使用css，javascript和html在手风琴格式中创建链接。但是，链接适用于除Firefox之外的所有浏览器。我究竟做错了什么？'Firefox中的手风琴链接损坏？

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

button.accordion { 
 
    background-color: #222222; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #666666; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 

 
    background-color: #FFFFFF; 
 
} 
 

 
div.panel.show { 
 
    display: block; 
 
}

<button class="accordion">1. Item 1 &nbsp &nbsp <a href="http://google.com">link 1</a> &nbsp &nbsp</button> 
 
<div class="panel"> 
 
    <p> 
 
    Line 1<br \> 
 
Line 2 <br \> <br \> 
 

 
    </p> 
 
</div> 
 

 
<button class="accordion">1. Item 2 &nbsp &nbsp <a href="http://google.com">link 1</a> &nbsp &nbsp</button> 
 
<div class="panel"> 
 
    <p> 
 
    Line 1<br \> 
 
Line 2 <br \> <br \> 
 

 
    </p> 
 
</div>

我救了我在的jsfiddle代码。

https://jsfiddle.net/jrprgst2/

来源

2016-09-18 user6845580

似乎对我在Firefox工作。在现有行为与预期行为之间的差异更详细地定义*“无效”* – charlietfl

google.com的代码中的嵌入式链接在使用Firefox进行单击时不起作用 - 但适用于所有其他浏览器。任何想法为什么或如何解决它？ Jquery手风琴似乎打破了我的其他格式。任何方式可以使用普通的JavaScript来修复？ – user6845580

jsfiddle代码在iframe中运行，并且无法在iframe中加载一些网站... google是one – charlietfl

尝试使用jQuery手风琴，而不是基本的JavaScript。

下面是在型动物浏览器上运行的为例：

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Accordion</title> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#accordion").accordion({ 
     alwaysOpen: false, 
     active: false, 
     autoheight: false, 
     clearStyle: true 
    }).find('a').click(function(ev) { 
     window.location.href = $(this).attr("href"); 
    }); 
    }); 
    </script> 
    <style> 
    .ui-accordion2-header { 
     position: absolute; 
     right: 10px; 
     top: 10px; 
     width: 345px; 
    } 

    .ui-accordion2-header a { 
     width: auto; 
     display: inline; 
    } 
    </style> 
</head> 

<body> 
<div id="accordion" class="ui-accordion2-group"> 
    <h3 data-sectionid="1"> 
    Section 1 <a href="https://www.google.com">link 1</a> 
    </h3> 
    <div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</p> 
    </div> 

    <h3 data-sectionid="2"> 
    Section 2 <a href="http://www.youtube.com">link 2</a> 
    </h3> 
    <div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</p> 
    </div> 
</div> 
</body> 
</html>

来源

2016-09-18 18:10:56

代码中的嵌入式链接对google.com不起作用，因此无法使用Firefox进行单击 - 但适用于所有其他浏览器。任何想法为什么或如何解决它？ Jquery手风琴似乎打破了我的其他格式。任何方式可以使用普通的JavaScript来修复？ – user6845580

这对我来说适用于Firefox（版本44.0.1）。我不知道用普通的Javascript来解决你的问题。 –

Firefox中的手风琴链接损坏？

回答

相关问题