Javascript（jQuery）隱藏和出現像菜單一樣的css文件

Question

我正在嘗試使用display：none和display：block來製作菜單。說實話，我不知道什麼是最好的辦法做到這一點。他們必須是圖像，因爲它們是我在Photoshop中使用的不同字體。這是我的HTML。

<div id="wrap"> 
    <div> 
     <img class="difficulty-rally"src="assets/images/difficulty-rally.png"> 
     <div class="difficulties"> 
      <img class="difficulty-easy"src="assets/images/easy-green.png"> 
      <img class="difficulty-medium"src="assets/images/medium-green.png"> 
      <img class="difficulty-hard"src="assets/images/hard-green.png"> 
      <img class="difficulty-insane"src="assets/images/insane-green.png"> 
     </div> 
    </div> 
</div> 

這是我的CSS

@import 'reset.css'; 
/*///////////////////MAIN/////////////////////////*/ 
#wrap{ 
    height: 500px; 
    width: 800px; 
    display: block; 
    margin: 0 auto; 
    border: 1px solid black; 
    background-color: black; 
    z-index: -900000; 
    position: relative; 
    overflow: hidden; 
} 
#main{ 
    position: relative; 
} 
#header{ 
    height: 52px; 
    width: 295px; 
    margin: 0 auto; 
} 
.title{ 
    margin-top: 20px; 
    height: 52px; 
    width: 295px; 
    background-image: url(../images/title.png); 
} 
.difficulty-rally{ 
    position: absolute; 
    z-index: -1000; 
} 
.diificulties{ 
    position: absolute; 
    z-index: 20; 
    height: 230px; 
    width: 150px; 
    margin-top: 157px; 
    margin-left: 335px; 
} 
.difficulty-easy{ 
    position: absolute; 
    z-index: 30; 
    display: none; 
} 
.difficulty-medium{ 
    position: absolute; 
    z-index: 30; 
    top: 62px; 
    left: 2px; 
    display: block; 
} 
.difficulty-hard{ 
    position: absolute; 
    z-index: 30; 
    bottom: 62px; 
    left: 3px; 
    display: none; 
} 
.difficulty-insane{ 
    position: absolute; 
    z-index: 30; 
    bottom: 1px; 
    left: 2px; 
    display: none; 
}  

這是我的JavaScript（jQuery的）

$(document).ready(function(){ 
    $(document).on('keyup', function(e){ 
     if(e.keyCode === 27){ 
      window.location = 'minigame.php'; 
     } 
    }) 

    var easy = $('.difficulty-easy'); 
    var medium = $('.difficulty-medium'); 
    var hard = $('.difficulty-hard'); 
    var insane = $('.difficulty-insane'); 

    $(document).on('keyup', function(e){ 
     if(e.keyCode === 40 && medium.css('display') == "block"){ 
      medium.css({'display' : 'none'}); 
      hard.css({'display' : 'block'}) 
     } 
     if(e.keyCode === 38 && medium.css('display') == "block"){ 
      medium.css({'display' : 'none'}); 
      easy.css({'display' : 'block'}) 
     } 
     if(e.keyCode === 40 && easy.css('display') == "block"){ 
      easy.css({'display' : 'none'}); 
      medium.css({'display' : 'block'}) 
     } 
     if(e.keyCode === 38 && easy.css('display') == "block"){ 
      easy.css({'display' : 'none'}); 
      insane.css({'display' : 'block'}) 
     } 
    }) 

}); 

編輯：對不起，我忘了說明問題，基本上當我點擊了媒體上它變得瘋狂而不是容易！

我知道我沒有完成一些選擇，但感覺他們不工作我會在這裏發表。

EDITx2：

easy.hide(); 
hard.hide(); 
insane.hide(); 
medium.show(); 

$(document).on('keyup', function(e){ 
    if(e.keyCode === 40 && medium.show();){ 
     medium.hide(); 
     hard.show(); 
    } 
    if(e.keyCode === 40 && hard.show();){ 
     hard.hide(); 
     insane.show(); 
    } 
}) 

答：

var current = 1; 
    var difficulties = $('#difficulties > img'); 

    $(document).on('keyup', function(e){ 
     if(e.keyCode === 40){ 
      current = current + 1; 
     } 
     if(e.keyCode === 38){ 
      current = current - 1; 
     } 

     var selectedIndex = current % difficulties.length; //so you can click enter and do something 

     if(e.keyCode === 13){ 
      alert($(difficulties.get(selectedIndex)).text()) //example of what you can do 
     } 

     $(difficulties.get(current % difficulties.length)).show().siblings().hide(); 
    }) 

}); 

Answer 1

使用jQuery，您可以使用.hide()隱藏的東西，.show()向他們展示，而不是用CSS

變化搞亂您的鍵控處理程序爲：

var current = 1; 
var difficulties = $('#difficulties > img'); 


$(document).on('keyup', function(e){ 
    if(e.keyCode === 40){ 
     current = current + 1; 
    } 
    if(e.keyCode === 38){ 
     current = current - 1; 
    } 

    var selectedIndex = current % difficulties.length; //so you can click enter and do something 

    if(e.keyCode === 13){ 
     alert($(difficulties.get(selectedIndex)).text()) //example of what you can do 
    } 

    $(difficulties.get(current % difficulties.length)).show().siblings().hide(); 
})