javascript - classList toggle(show) 不显示下拉内容

Question

我想打开我网站的“购物车”。当它被点击时，会有一个下拉框。它在我的另一个网站上运行良好，我几乎复制了它的正确代码，但它只是没有在这个网站上显示下拉内容。有人可以帮我解释一下吗？

html:

function myFunction(){
		    document.getElementById("drop").classList.toggle("show");
		 }

    div.icon
    {
    	top:25px;
    	position:absolute;
    	right:20px;
    	float:left;
    	display:inline-block;
    	
    }
    div.dropdown
    {
    	
        position: absolute;
    	background-color:#F1F1F1;
    	min-width: 160px;
    	z-index: 1;
        height:215px;
        width:400px;
    	text-align:center;
        top:30px;
    	right:-6px;
    	
    }
    
    .dropdown a
    {
    	text-decoration:none;
    	color:black;
    	background-color:#E9E9E9;
    	position:absolute;
    	width:100%;
    	bottom:0;
    	left:0;
    	padding:13px 0 13px 0;
    	font-size:11px;
    }
    
    .dropdown p
    {
    	position:absolute;
    	top:100px;
    	width:100%;
    	font-size:13.4px;
    }
    .icon .dropdown::after
    {
    	content: "";
        position: absolute;
    	bottom: 100%;
        right: 7%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #F1F1F1; transparent;
    }
    
    .show
    {
    	display:block;
    }

    

<div>  
       <div class="icon">
	     <p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>	
           <div class="dropdown" id="drop">
	         <p>Your shopping cart is empty</p>
	         <a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
           </div>	   
	   </div>

以上是html代码。购物车在图标类中。我创建了一个购物车 div 和一个下拉 div。单击购物车时，应出现下拉块。

标签： javascripthtmlcssweb

Answer 1

看来您的内部元素没有事件侦听器。

一种方法是

function myFunction() {
      this.classList.toggle("show");
 }

document.getElementById("inner").addEventListener('click', myFunction)