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中的手風琴鏈接損壞？

回答

相關問題