使用jQuery 3.1.0顯示和隱藏Firefox中不工作

Question

我正在使用jQuery創建一個小型廣播播放器。你可以在codepen找到代碼。當我在Firefox上運行它時，我遇到了代碼問題（它適用於所有其他瀏覽器）。以下部分JS：

$(".back").click(function(){ 
    $("h2").show(); 
    $("hr").show(); 
    $(".guziki").hide(); 
    $("#backbutton").hide(); 
}); 

不起作用。我從來沒有遇到過這個問題。什麼可能導致這個？

$(document).ready(
 
    function() { 
 
    $(".middle").click(function() { 
 
     $(this).children(".guziki").show(); 
 
     $("h2").hide(); 
 
     $("hr").hide(); 
 
     $("#backbutton").show(); 
 
    }); 
 
    $(".back").click(function() { 
 
     $("h2").show(); 
 
     $("hr").show(); 
 
     $(".guziki").hide(); 
 
     $("#backbutton").hide(); 
 
     console.log($(".back").parent()) 
 
    }); 
 
    }); 
 
var buttons = $("#one, #two").on("click", function() { 
 
    buttons.toggle(); 
 
});

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio { 
 
    background-color: #e0e0e0; 
 
    max-width: 25%; 
 
    overflow: hidden; 
 
    font-family: helvetica; 
 
} 
 
h2 { 
 
    color: #212121; 
 
    text-align: center; 
 
    font-family: 'Bungee Hairline' 
 
} 
 
h1 { 
 
    color: #e0e0e0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    padding-top: 2%; 
 
    font-family: 'Bungee Hairline', cursive; 
 
    font-size: 2em; 
 
} 
 
.top { 
 
    background-color: #212121; 
 
    height: 50px; 
 
    margin-top: -5%; 
 
} 
 
.bottom { 
 
    text-align: center; 
 
    background-color: #212121; 
 
    color: #e0e0e0; 
 
    padding: 5px 0; 
 
} 
 
button { 
 
    border: none; 
 
    background: transparent; 
 
    display: block; 
 
    margin: 0 auto; 
 
    font-size: 40px; 
 
} 
 
.guziki { 
 
    text-align: center; 
 
    display: none; 
 
} 
 
#two { 
 
    display: none; 
 
} 
 
.fa-chevron-left { 
 
    position: absolute; 
 
    left: 20px; 
 
    font-size: 30px; 
 
    padding-top: 10px; 
 
    cursor: pointer; 
 
} 
 
#backbutton { 
 
    display: none; 
 
    padding-top: 30px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio> 
 
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio> 
 

 
<div id="radio"> 
 
    <div class="top"> 
 
    <h1>radio techno</h1> 
 
    <div id="backbutton"> 
 
     <button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i> 
 
     </button> 
 
    </div> 
 
    </div> 
 
    <div class="middle kinetic"> 
 
    <h2 id="kinetic">Kinetic</h2> 
 
    <div class="guziki" id="guzikione"> 
 
     <button onclick="document.getElementById('player').volume += 0.1">+</button> 
 
     </button> 
 
     <button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i> 
 
     </button> 
 
     <button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i> 
 
     </button> 
 
     <button onclick="document.getElementById('player').volume -= 0.1">-</button> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
    <div class="middle technofm"> 
 
    <h2 id="technofm">techno.fm</h2> 
 
    <div class="guziki"> 
 
     <button onclick="document.getElementById('player2').volume += 0.1">+</button> 
 
     </button> 
 
     <button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i> 
 
     </button> 
 
     <button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i> 
 
     </button> 
 
     <button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i> 
 
     </button> 
 
     <button onclick="document.getElementById('player2').volume -= 0.1">-</button> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
    <div class="middle"> 
 
    <h2>uzic</h2> 
 
    </div> 
 
    <hr> 
 
    <div class="middle"> 
 
    <h2>ballads fm 87,1</h2> 
 
    </div> 
 
    <hr> 
 
    <div class="middle"> 
 
    <h2>maximum fm 142,2</h2> 
 
    </div> 
 
    <div class=bottom> 
 
    <h4>currently playing</h4> 
 
    </div> 
 
</div>

編輯：我想這可能是一個codepen/Firefox的錯誤，但即使我從我的計算機上運行它，它仍然不僅工作在Firefox。

Answer 1

問題不在於jQuery。該按鈕非常小，您不會點擊它。

Demo

#backbutton button { 
    position: absolute; 
    left: 300px; 
    min-width: 50px; 
    min-height: 50px; 
    background: pink; 
} 

Answer 2

這是由你的人字形造成被重新定位了火狐期待按鈕的邊界之外。如果你保持按鈕內的V形和定位按鈕，然後它的作品。

.fa-chevron-left { 
    font-size: 30px; 
    padding-top: 10px; 
    cursor: pointer; 
} 

#backbutton { 
    display: none; 
    padding-top: 30px; 
    position:relative; 
} 
.back { 
    position: absolute; 
    left: 20px; 
} 

http://codepen.io/anon/pen/GjokQp