使用html css＆js的分区的汉堡包下拉菜单

问题描述 投票：1回答：2

我想用html，css和js做一个汉堡包下拉菜单。它将执行汉堡包到x函数但是当我把document.getElementById("thetabledrop").style.display = "block";放在旋转线的同一个函数时它没有执行。

这是我的代码

$(document).ready(function() {
  $('.hamburgericon').click(function() {
    $('.hamburgericon').toggleClass('active');
    var x = document.getElementById("bounce");
    if (x.style.display === "none") {
      x.style.display = "none";

    } else {
      x.style.display = "none";

    }
    document.getElementById("thetabledrop").style.display = "block";

  })



})
body {
  margin: 0px;
  padding: 0px;
  background: #fff;
}

.hamburgericon {
  position: absolute;
  top: 5%;
  left: 97%;
  Transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.hamburger {
  width: 50px;
  height: 6px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
  transition-delay: .1s;
}

.hamburger:before,
.hamburger:after {
  content: '';
  position: absolute;
  width: 40px;
  height: 6px;
  background: #000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
  transition-delay: .1s;
}

.hamburger:before {
  top: -16px;
}

.hamburger:after {
  top: 16px;
}

.hamburgericon.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.hamburgericon.active .hamburger:before {
  top: 0;
  transform: rotate(45deg);
}

.hamburgericon.active .hamburger:after {
  top: 0;
  transform: rotate(135deg);
}

table {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamburgericon" style="z-index: 2">
  <!-- dropdown btn -->
  <div class="hamburger" role=button></div>
</div>

<table width=50% id="thetabledrop">
  <tr>
    <th></th>
  </tr>
</table>
javascript html css
2个回答
1
投票

$(document).ready(function(){
   $('.hamburgericon').click(function(){
        $('.hamburgericon').toggleClass('active');
})
})
body {
            margin: 0px;
            padding: 0px;
            background: #fff;
        }

        .hamburgericon {
            position: absolute;
            top: 15%;
            left: 97%;
            Transform: translate(-50%,-50%);
            width: 80px;
            height: 80px;
            cursor: pointer;



        }        

        .hamburger {
            width: 50px;
            height: 6px;
            background: #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
            transition: .5s;
            transition-delay: .1s;
        }

        .hamburger:before,

        .hamburger:after{
            content: '';
            position: absolute;
            width: 40px;
            height: 6px;
            background: #000;
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
            transition: .5s;
            transition-delay: .1s;
        }

        .hamburger:before{
            top: -16px;
        }

        .hamburger:after{
            top: 16px;
        }

        .hamburgericon.active .hamburger {
            background: rgba(0,0,0,0);
            box-shadow: 0 2px 5px rgba(0,0,0,0);

        }

        .hamburgericon.active .hamburger:before{
            top: 0;
           transform: rotate(45deg); 
        }

        .hamburgericon.active .hamburger:after{
            top: 0;
           transform: rotate(135deg); 
        }

table {
 display:none;
}

.hamburgericon.active + #thetabledrop { display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="hamburgericon" style="z-index: 2" ><!-- dropdown btn -->
    <div class="hamburger"  role=button></div>
</div> 

<table width=50% id="thetabledrop">
    <tr>
    <th>sfgdsgsdfgsdfgdsf</th>
    </tr>
    </table>

希望这适合你，因为不需要使用id by get元素

0
投票

请先导入jquery库。

<html>
<style>
body {
            margin: 0px;
            padding: 0px;
            background: #fff;
        }

        .hamburgericon {
            position: absolute;
            top: 5%;
            left: 97%;
            Transform: translate(-50%,-50%);
            width: 80px;
            height: 80px;
            cursor: pointer;



        }        

        .hamburger {
            width: 50px;
            height: 6px;
            background: #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
            transition: .5s;
            transition-delay: .1s;
        }

        .hamburger:before,

        .hamburger:after{
            content: '';
            position: absolute;
            width: 40px;
            height: 6px;
            background: #000;
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
            transition: .5s;
            transition-delay: .1s;
        }

        .hamburger:before{
            top: -16px;
        }

        .hamburger:after{
            top: 16px;
        }

        .hamburgericon.active .hamburger {
            background: rgba(0,0,0,0);
            box-shadow: 0 2px 5px rgba(0,0,0,0);

        }

        .hamburgericon.active .hamburger:before{
            top: 0;
           transform: rotate(45deg); 
        }

        .hamburgericon.active .hamburger:after{
            top: 0;
           transform: rotate(135deg); 
        }

table {
 display:none;
}
</style>

<body>

   <div class="hamburgericon" style="z-index: 2" ><!-- dropdown btn -->
    <div class="hamburger"  role=button></div>
</div> 

<table width=50% id="thetabledrop">
    <tr>
    <th></th>
    </tr>
    </table> 

</body>
<script
			  src="https://code.jquery.com/jquery-3.3.1.js"
			  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
			  crossorigin="anonymous"></script>
<script type="text/javascript">//3 line menu

$(document).ready(function(){
   $('.hamburgericon').click(function(){
        $('.hamburgericon').toggleClass('active');
        var x = document.getElementById("bounce");
   if (x.style.display === "none") {
       x.style.display = "none";

   } else {
        x.style.display = "none";

   }
       document.getElementById("thetabledrop").style.display = "block";

    })



})
</script>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.