当前位置： 文江博客话题详情

如何隐藏下拉菜单以在徽标上显示

发布于 2025-01-25 02:08:37 字数 6058 浏览 0 评论 0原文

我在菜单上工作，几乎在那里。我已经构建了可折叠菜单，现在试图将其包含在单击徽标（将其作为下拉按钮）时显示的下拉菜单中。当前，菜单立即出现在页面加载上。

我如何隐藏页面加载菜单，并且只有在单击徽标/下车按钮时才能使其出现？我需要添加什么代码才能实现这一目标？

请参阅以下代码的页面直播： https://boys-cry.com/test/

谢谢呢

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.accordion {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.accordion:hover {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.accordion:focus {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.panel {
  color: black;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #00000000;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 16px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 0px 0px 0px 10px;
  margin: 0px 0px 0px 11px;
}

.link {
  background-color: #00000000;
  color: black;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 6px 0px 6px 5px;
}

.link:hover {
  background-color: #00000000;
  color: black;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 6px 0px 6px 5px;
}

hr.solid {
  border-left: none;
  border-right: none;
  border-top: 1px solid #000000;
  border-bottom: none;
  max-width: 200px;
  margin-left: 15px;
  padding-top: 5px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

.dropbtn:hover {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

.dropbtn:focus {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
  outline: none;
}

</style>
</head>

<body>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown">
  
<div>
<hr class="solid">
<div class="accordion-div">
  <button class="accordion"><span class="faq__question-heading">We</span></button>
  <div class="panel">
    <p style="padding:18px 0;">We are Content Creators.<br>We cultivate desire and change through story telling.</p>
  </div>
<hr class="solid">
  <button class="accordion"><span class="faq__question-heading">Clients</span></button>
  <div class="panel">
    <p style="padding:18px 0;">Red Bull . Nike . Vogue . Adidas . Rolex . Andrew Cotton . Dynamo . Coca Cola . Nowness . Bose . Selfridges . Levis . Fedex . Liverpool FC . England Rugby . Rimowa . GQ . Vanity Fair</p>
  </div>
<hr class="solid">
  <button class="accordion"><span class="faq__question-heading"><a class="link" href="mailto:[email protected]">Get In Touch</a></span></button>
  <div class="panel"></div>
</div>
<hr class="solid">
</div>


<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {

var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  let active = document.querySelectorAll(".accordion-div .accordion.active");
  for(let j = 0; j < active.length; j++){
    active[j].classList.remove("active");
    active[j].nextElementSibling.style.maxHeight = null;
  }
  this.classList.toggle("active");
  panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
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');
      }
    }
  }
}
</script>

</body>
</html>
原文

Im working on a menu and almost there. I have built the collapsible menu, and now trying to contain it in a dropdown menu that is displayed when the logo (which is styled as a dropdown button) is clicked. Currently the menu appears straight away on page load.

How can I hide the menu on page load, and make it only appear when the logo/dropwdown button is clicked? What code do I need to add to achieve this please?

See page live with below code here: https://boys-cry.com/test/

Thanks!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.accordion {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.accordion:hover {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.accordion:focus {
  background-color: #00000000;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  max-width: 180px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 0px 0px 5px 5px;
  margin: 0px 0px 0px 15px;
}

.panel {
  color: black;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #00000000;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 16px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 0px 0px 0px 10px;
  margin: 0px 0px 0px 11px;
}

.link {
  background-color: #00000000;
  color: black;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 6px 0px 6px 5px;
}

.link:hover {
  background-color: #00000000;
  color: black;
  max-width: 200px;
  z-index: 1;
  font-family: helvetica;
  font-size: 18px;
  font-weight: 300;
  margin: -4px;
  text-decoration: none;
  display: block;
  padding: 6px 0px 6px 5px;
}

hr.solid {
  border-left: none;
  border-right: none;
  border-top: 1px solid #000000;
  border-bottom: none;
  max-width: 200px;
  margin-left: 15px;
  padding-top: 5px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

.dropbtn:hover {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

.dropbtn:focus {
  color: #00000000;
  padding: 40px 12px 50px 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 100px;
  outline: none;
}

</style>
</head>

<body>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown">
  
<div>
<hr class="solid">
<div class="accordion-div">
  <button class="accordion"><span class="faq__question-heading">We</span></button>
  <div class="panel">
    <p style="padding:18px 0;">We are Content Creators.<br>We cultivate desire and change through story telling.</p>
  </div>
<hr class="solid">
  <button class="accordion"><span class="faq__question-heading">Clients</span></button>
  <div class="panel">
    <p style="padding:18px 0;">Red Bull . Nike . Vogue . Adidas . Rolex . Andrew Cotton . Dynamo . Coca Cola . Nowness . Bose . Selfridges . Levis . Fedex . Liverpool FC . England Rugby . Rimowa . GQ . Vanity Fair</p>
  </div>
<hr class="solid">
  <button class="accordion"><span class="faq__question-heading"><a class="link" href="mailto:[email protected]">Get In Touch</a></span></button>
  <div class="panel"></div>
</div>
<hr class="solid">
</div>


<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {

var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  let active = document.querySelectorAll(".accordion-div .accordion.active");
  for(let j = 0; j < active.length; j++){
    active[j].classList.remove("active");
    active[j].nextElementSibling.style.maxHeight = null;
  }
  this.classList.toggle("active");
  panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
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');
      }
    }
  }
}
</script>

</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

半山落雨半山空 2025-02-01 02:08:37

我检查了该网站，您只需要添加以下CSS，

如果徽标没有CSS显示类，则隐藏了菜单，如果它具有显示课程，则它显示菜单

CSS

#myDropdown > div {
 display: none
}
#myDropdown.show > div {
 display: block
}

I checked the site and you just need to add the following css

If the logo doesn't have the css show class it hides the menu, if it has the show class it shows the menu

CSS

#myDropdown > div {
 display: none
}
#myDropdown.show > div {
 display: block
}
回复 原文
你另情深 2025-02-01 02:08:37

单击徽标时要显示下拉菜单

要回答您的请求，您要在MyFunction（）中

function myFunction() {
  if(document.getElementById("myDropdown").style.visibility == "visible"){
    document.getElementById("myDropdown").style.visibility = "hidden";
  } else {
    document.getElementById("myDropdown").style.visibility = "visible";
  }
}

：

#myDropdown{
    visibility: hidden;
}

to answer your request you want to display your drop down menu when you click on your logo

in your myFunction() you have to put this :

function myFunction() {
  if(document.getElementById("myDropdown").style.visibility == "visible"){
    document.getElementById("myDropdown").style.visibility = "hidden";
  } else {
    document.getElementById("myDropdown").style.visibility = "visible";
  }
}

and in Css you have to place this :

#myDropdown{
    visibility: hidden;
}
回复 原文
~没有更多了~

关于作者

风蛊

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

╰ゝ天使的微笑

文章 0 评论 0

少女净妖师

文章 0 评论 0

朱洁

文章 0 评论 0

觉浅

文章 0 评论 0

滥情空心

文章 0 评论 0

hl1314520

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文