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

これはあなたのシェブロンは、Firefoxはボタンを期待していた場所の境界の外に再配置されることによって引き起こされます。シェブロンをボタンの内側に置き、ボタンを配置すると機能します。

.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