Question

我想要一个类似下拉菜单的东西。我现在在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文件中添加内容

Answer 1

在你的li元素中添加onclick

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

Answer 2

使用事件侦听器，#Ü获取样式，getComputedStyle()获取可见性属性。然后使用getPropertyValue()作为切换来打开和关闭菜单下拉菜单。对于if else类

，css应为visibility: hidden

recipe

Answer 3

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

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

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

需要帮助使用Javascript更改悬停到OnClick

3 个答案: