Question

点击按钮并显示菜单时，我有一个下拉菜单。

我添加了图标：＆gt;当点击菜单时图标需要机会位置，问题是这不会再回来......

当菜单是colse图标恢复正常时，某人正在修复此代码的方式？

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
	    background-color:transparent;
	    color: #000;
	    padding: 16px 0px 0px 20px;
	    font-size: 16px;
	    border: none;
	    cursor: pointer;
	}
	.dropbtn:before {
	content: "\003e";
	color: #000;
	padding-right:10px;
	}
	
	.dropbtn:hover:before {
	content: "\003e";
	display: inline-block;
	  -webkit-transform: rotateZ(90deg);
	  -moz-transform: rotateZ(90deg);
	  -o-transform: rotateZ(90deg);
	  -ms-transform: rotateZ(90deg);
	  transform: translate(-5px,5px) rotateZ(90deg);
	}

	.dropbtn:hover, .dropbtn:focus {
	    background-color: transparent;
	    color:#000
	}

	.dropdown {
	    position: relative;
	    display: inline-block;
	    margin:50px 0px;
	    width:100%;
	    z-index:0
	}

	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: #fff;
	    overflow: auto;
	    width:100%;
	    padding-bottom:40px
	}
	#menu-category{margin:0}
	.dropdown-content a {
	   	color: #000;
	    padding: 12px 0px 0px 60px;
	    text-decoration: none;
	    display: block;
	    width:100%;
	    font-size:14px;
	}
.show {display:block;}

<body>
  <div class="dropdown">
    <a href="#" class="work-dd">Work</a><button onclick="myFunction()"   class="dropbtn">Overview</button>
     <div id="myDropdown" class="dropdown-content">
            ....code of menu...
     </div>
  </div>
</body>

css伪类图标移动按钮单击

0 个答案: