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。单击购物车后，应该会显示下拉框。

Answer 1

您的内部元素似乎没有事件侦听器。

一种做到这一点的方法是

@ComponentScan(basePackages = "com.hive")

Answer 2

您的CSS中有div.dropdown，这使.show蒙上了阴影：https://developer.mozilla.org/docs/Web/CSS/Specificity

仅使用.dropdown。

div.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->

Answer 3

切换没有问题，CSS刚刚关闭。由于show具有优先权，因此类div.dropdown不适用。我在下面修改了示例。

function myFunction() {
  document.getElementById("inner").classList.toggle('show')
}

div.icon {
  top: 25px;
  position: absolute;
  right: 20px;
  float: left;
  display: inline-block;
  background-color: black;
}

.dropdown {
  display: none;
  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 class="icon">
     <p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p> 
       <div class="dropdown" id="inner">
         <p>Your shopping cart is empty</p>
         <a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
       </div>      
   </div>

classList toggle（show）不显示下拉内容

3 个答案: