需要帮助以使用 Javascript 将悬停更改为 OnClick答案

【问题标题】：Need help to change hover to OnClick using Javascript需要帮助以使用 Javascript 将悬停更改为 OnClick
【发布时间】：2015-11-25 09:22:30
【问题描述】：

我想要一个类似下拉菜单的东西。我现在在 css 中悬停，但我知道我必须使用 javascript 使其可点击。谁能帮我让它可点击？

这是我当前的 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 文件中添加什么

【问题讨论】：

标签： javascript css onclick hover dropdown

【解决方案1】：

在你的 li 元素中添加 onclick

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

【讨论】：

并且可能需要一个 onmouseout 来恢复默认视图。
添加此行时没有任何反应。

【解决方案2】：

使用事件监听器，getComputedStyle() 获取样式，getPropertyValue() 获取可见性属性。然后使用if else 作为打开和关闭菜单下拉菜单的开关。 recipe 类的 css 应该是 visibility: hidden

<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>

【讨论】：

【解决方案3】：

使用 Jquery 语法可以做到这一点。

将以下代码添加到 <head> 标签并从 css 中删除悬停。

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

【讨论】：