Question

这是一个下拉列表，我希望使它像wp。当任何人到达仪表板并单击头像时，Dropdown将显示全屏。当有人从PC访问此仪表板并单击化身时。该下拉尺寸为180px。

这里codepen link进行检查并提供解决方案。

在媒体查询中相对位置无效。请帮我解决这个问题。

<div class="dropdown">
    <button class="dropbtn">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbnpURUI0RXpHWPtUZouzXUDiXme-mFvQDjzuXbeRE3XB5QGKOYg" alt="User Profile">
    </button>
    <div class="dropdown-content">
        <a href="#">Inad Islam</a>
        <a href="#">Edit my Profile</a>
        <a href="">Log Out</a>
    </div>
</div>

.dropbtn {
    margin: 0;
    border: 0;
    outline: 0;
    background: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 5px 5px 0 5px;
}
.dropdown {
    overflow: hidden;
}
.dropdown-content {
    display: none;
    position: absolute;
    left:0;
    background: #4796b3;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    margin:0;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropbtn img {
    width: 40px;
    height: 40px;
}
.dropdown:hover .dropbtn {
    background: #25a2c1;
}

@media only screen and (min-width: 900px) {
  .dropdown {
    position: relative;
    disolay: inline-block;
   }
  .dropdown-content {
    min-width: 160px;
  }
}

Answer 1

   $(document).ready(function(){
	$('.dropbtn').click(function(){
		$(this).next('.dropdown-content').slideToggle();
	});
 });

body{margin:0px; padding:0px;}
.dropbtn {
    margin: 0;
    border: 0;
    outline: 0;
    background: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 5px 5px 0 5px;
}
 
.dropdown-content {
    display: none;
    position: absolute;
    left:0;
    background: #4796b3;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    margin:0;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    display: block;
}
 
.dropbtn img {
    width: 40px;
    height: 40px;
}
.dropdown:hover .dropbtn {
    background: #25a2c1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
              <button class="dropbtn"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbnpURUI0RXpHWPtUZouzXUDiXme-mFvQDjzuXbeRE3XB5QGKOYg" alt="User Profile"></button>
              <div class="dropdown-content">
                  <a href="#">Inad Islam</a>
                  <a href="#">Edit my Profile</a>
                  <a href="">Log Out</a>
              </div>
          </div>

希望如此对您有帮助。如果有任何报价，请告诉我。电子邮件ID deshrajsixsense@gmail.com

Answer 2

如果我通过“响应”正确地理解了您，则可以提出解决方案。我从position:absolute中删除了left:0和.dropdown-content。我还删除了您在媒体查询中所做的错字。请尝试一下。 https://codepen.io/ekinalcar/pen/PMBPMd

.dropdown-content {
    display: none;
    background: #4796b3;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
@media only screen and (min-width: 900px) {
  .dropdown {
    position: relative;
   }
}

如何使此下拉列表响应？

2 个答案: