需要幫助來改變懸停使用Javascript的OnClick

我想有一個像下拉菜單的東西。我現在有一個懸停在CSS中，但我知道我必須使用JavaScript來使其可點擊。任何人都可以幫助我使它可點擊嗎？需要幫助來改變懸停使用Javascript的OnClick

這是我目前的html代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> 
    <link rel="stylesheet" href="main.css"> 
</head> 

<body> 
    <div class="jumbotron">  
          <p>What will you be making for dinner tonight?</p> 
          <li class="inspiration"> 
          Give me some inspiration! 
          <div class="recipe"> 
          With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish! 
          <ul> 
           <iframe width="392" height="220" src="https://www.youtube.com/embed/SfcSo-j-doc?rel=0&amp;showinfo=0" frameborder="20px" allowfullscreen></iframe> 
          <ul> 
          </div> 
          </li> 
    </div> 
</body> 
</html>

和我的CSS：

.inspiration { 
     display: inline-block; 
     margin-right: -4px; 
     position: relative; 
     padding: 15px 20px; 
     cursor: pointer; 
     color: #012556; 
     font-size: 20px; 
    } 

    .inspiration:hover { 
     background: #555; 
     color: #012556; 
     font-size: 20px; 
    } 

    .inspiration:hover .recipe { 
     display: block; 
     opacity: 1; 
     visibility: visible; 
    } 

    .inspiration .recipe { 
     display: block; 
     padding: 0; 
     color: #fff; 
     position: center; 
     width: 1000px; 
     padding-top: 20px; 
     padding-bottom: 20px; 
     box-shadow: none; 
     display: none; 
     opacity: 0; 
     visibility: hidden; 
    } 

    .jumbotron { 
     background-image:url(http://www.superiorequipmentsupplies.com/wp-content/themes/superior_v1.73/library/images/hero-residential.jpg); 
     height: 640px; 
     background-repeat: no-repeat; 
     background-size: cover; 
     text-align: center; 
    } 

    .jumbotron h1 { 
     color: #fff; 
     font-size: 42px; 
     font-family: 'Shift', sans-serif; 
     font-weight: bold; 
     text-align: center; 
    } 

    .jumbotron p { 
     font-size: 20px; 
     color: #fff; 
     text-align: center; 
    }

我還是不明白該怎麼把我的JavaScript文件

來源

2015-11-25 Maris

中的onclick加入您的li元件

<li class="inspiration" onclick="functionname()">

來源

2015-11-25 09:32:44 mathew

而且可能需要一個onmouseout來恢復默認視圖。 –

當我添加此行時沒有任何反應。 – Maris

使用事件偵聽器，getComputedStyle()獲取樣式，getPropertyValue()獲取可見性屬性。然後使用if else作爲打開和關閉菜單下拉菜單的切換。 CSS的應該是visibility: hidden爲recipe類

<script> 
    var inspiration = document.getElementsByClassName("inspiration"); 
    var expandMenu = function() { 
     var recipe = document.getElementsByClassName("recipe"); 
     var CSSprop = window.getComputedStyle(recipe,null).getPropertyValue("visibility"); 
     if(CSSprop == "visible"){ 
      recipe[0].style.visibility = "hidden"; 
     }else { 
      recipe[0].style.visibility = "visible"; 
     } 
    } 
    inspiration[0].addEventListener("click", expandMenu); 
</script>

來源

2015-11-25 10:00:07 Dheeraj

使用jQuery語法，你可以做到這一點。

將以下代碼添加到<head>標記並從css中移除懸停。

<script> 
    $(document).ready(function(){ 
     $(".inspiration").click(function(){ 
      $("#recepe").toggle(); 
     }); 
    }); 
</script>

來源

2015-11-25 10:06:07

需要幫助來改變懸停使用Javascript的OnClick

回答

相關問題