下拉菜单无法正常工作
Posted
技术标签:
【中文标题】下拉菜单无法正常工作【英文标题】：Dropdown menu that does not work properly 【发布时间】：2020-10-27 03:08:41 【问题描述】：在我的网站上，我有一个菜单栏，其中包含一些直接链接和两个下拉菜单。
在手机上，当我第一次录制第二个下拉菜单时，它打开了，我可以看到它的链接。然后，我把它打开的第一个下拉菜单也录下来了。但是，现在，当我在 SECOND DROPDOWN MENU 上录音时，就好像我已经录音了菜单栏的下一个直接链接。
例如，我尝试在第二个下拉菜单上放置死亡链接 (#)，但没有成功。
如果您想查看：https://www.veganimaliste.com/index.php
这是 PHP html 代码
<!-- ANCHOR BACK TO THE TOP -->
<span id="haut-page" class="anchor"></span>
<!-- ANCHOR BACK TO THE TOP END-->
<!-- LOGO AND MENU WRAPP -->
<div class="menu-wrap">
<!-- WEBSITE LOGO -->
<div class="logo"><a href="index.php" target="_self"><span class="logo-line"><span class="logo-color">veg</span>animaliste</span>.com</a> </div>
<!-- WEBSITE LOGO END-->
<!-- MENU -->
<div class="topnav" id="myTopnav">
<!-- FIRST DIRECT MENU LINK / HOME PAGE-->
<a href="index.php" title="Page d'accueil" target="_self"><img class="sans-texte" src="img/menu/home-g.png" ></a>
<!-- FIRST DIRECT MENU LINK / HOME PAGE END -->
<!-- FIRST DROPDOWN MENU -->
<div class="dropdown">
<button class="dropbtn">VÉGANISME <img src="img/menu/down-g.png"/></button>
<div class="dropdown-content">
<a href="v-intro.php" target="_self"><img src="img/menu/dot-g.png"/>Vérités ugentes à connaître</a>
<a href="articles.php" target="_self"><img src="img/menu/dot-g.png"/>Articles</a>
<a href="reponses.php" target="_self"><img src="img/menu/dot-g.png"/>Réponses aux non-véganes</a>
<a href="reponses-av.php" target="_self"><img src="img/menu/dot-g.png"/>Réponses de AV aux non-véganes</a>
<a href="qui-sont-ils.php" target="_self"><img src="img/menu/dot-g.png"/>Qui sont-ils? </a>
<a href="ce-que-nous-pouvons-faire.php" target="_self"><img src="img/menu/dot-g.png"/>Ce que nous pouvons faire</a>
</div>
</div>
<!-- DROPDOWN MENU END -->
<!-- SECONDE DROPDOWN MENU -->
<div class="dropdown">
<button class="dropbtn">DOCUMENTS <img src="img/menu/down-g.png"/></button>
<div class="dropdown-content">
<a href="videos.php" target="_self"><img src="img/menu/dot-g.png"/>Vidéos</a>
<a href="defenitions.php" target="_self"><img src="img/menu/dot-g.png"/>Défénitions</a>
<a href="sites.php" target="_self"><img src="img/menu/dot-g.png"/>Sites recommandés</a>
<a href="livres.php" target="_self"><img src="img/menu/dot-g.png"/>Livres recommandés</a>
<a href="ressources.php" target="_self"><img src="img/menu/dot-g.png"/>Ressources</a>
</div>
</div>
<!-- SECONDE DROPDOWN MENU END-->
<!-- OTHER DIRECT MENU LINK -->
<a href="recherche.php" title="Rechercher sur le site" target="_self"><img class="sans-texte" src="img/menu/recherche.png"/></a>
<a href="a-propos.php" title="À propos" target="_self"><img class="sans-texte" src="img/menu/a-propos-g.png"/></a>
<a href="contact.php" title="M'écrire" target="_self"><img class="sans-texte" src="img/menu/enveloppe-g.png"/></a>
<a href="https://www.facebook.com/renedemoors" title="Me joindre sur Facobook" target="_blank"><img class="sans-texte" src="img/partage/facebook-s.png"/></a>
<!-- OTHER DIRECT MENU LINK END -->
<!-- DIRECT LINK TO CHANGE LANGUAGE -->
<a href=" <?php
$url= $_SERVER['REQUEST_URI'];
$positionslash= strrpos($url, "/");
$filename= substr($url, $positionslash + 1);
echo "en/". $filename;
?> " title="english" target="_self"><span class="menu-lang">English</span></a>
<!-- DIRECT LINK TO CHANGE LANGUAGE END -->
<!-- OPEN / CLOSE MOBILE MENU -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><img src="img/menu/bars-g.png" /></a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<div class="menu-open"><img src="img/menu/bars-g.png" />
</div>
<div class="menu-close"><img src="img/menu/times-r.png" />
</div>
</a>
<!-- OPEN / CLOSE MOBILE MENU END -->
</div>
<!-- MENU END -->
</div>
<!-- LOGO AND MENU WRAPP END -->
这是 CSS 代码
/* LOGO */
.logo
display: block;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0 0 0 27px;
height: 73px;
background-color: black;
.logo a
font-family: "Times New Roman", Times, serif;
font-weight: normal;
display: inline-block;
color: white;
font-style: italic;
font-size: 28px;
margin: 0;
padding: 18px 5px 25px 5px;
letter-spacing: -.5px;
box-shadow: 0 2px 0 lightgreen;
text-decoration: none;
padding-bottom: 3px;
/* color of the letters Veg of the logo */
.logo .logo-color
color: lightgreen;
margin-right: 0;
.logo .logo-color-2
color: dimgray;
margin-right: 0;
/* LOGO END */
/* MENUM */
.menu-lang
color: lightgreen;
font-size: 22px;
font-style: italic;
.menu-wrap.fixed
position: fixed;
/*d'autres proprietes si besoin*/
.menu-wrap
font-style: normal;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
z-index: 200;
height: 73px;
background-color: black;
.topnav
position: absolute;
float: right;
display: inline-block;
top: 0;
right: 0;
margin: 0;
padding: 0 32px 0 0;
height: 73px;
background: black;
letter-spacing: -1.5px;
/* direct linksof the menu */
.topnav a
color: white;
top: 0;
right: 0;
float: left;
display: inline-block;
text-align: center;
padding: 25px 10px 19px 10px;
text-decoration: none;
font-size: 21px;
/* menu icons */
.topnav img
height: 14px;
width: auto;
margin: 0;
padding: 0 4px 0 1px;
text-decoration: none;
/* direct links icons */
img.sans-texte
height: 22px;
width: auto;
margin: 0;
padding: 0 4px 0 1px;
text-decoration: none;
/* images icones dans le texte---------------------*/
img.sans-texte-2
height: 35px;
width: auto;
background: black;
margin: 0;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
img.sans-texte-2:hover
transform: translateY(-2px);
.topnav .icon
position: absolute;
margin: 0;
padding: 0;
color: lightgreen;
display: none;
top: 0;
right: 0;
border: none;
/* DROPDOWN MENU */
/* left aligment of dropdown menu links */
.dropdown
float: left;
overflow: hidden;
/* dropdown menu links */
.dropdown .dropbtn
display: inline-block;
font-size: 21px;
border: none;
outline: none;
color: white;
padding: 28px 2px 20px 5px;
background-color: inherit;
font-family: inherit;
margin: 0;
top: 0;
/* dropdwon menu contant */
.dropdown-content
display: none;
position: absolute;
background-color: black;
width: auto;
z-index: 1;
/* dropdown menu links */
.dropdown-content a
float: none;
color: lightgreen;
font-size: 19px;
padding: 15px 35px 15px 15px;
text-decoration: none;
display: block;
text-align: left;
letter-spacing: normal;
/* bottom line of dropdown menu liks*/
.dropdown-content a
border-top: 1px solid #4B4A4A;
/* hover on dropdwown menu links */
.topnav a:hover, .dropdown:hover .dropbtn
background-color: #2C2C2C;
color: white;
/* meme chose */
.dropdown-content a:hover
background-color: #2C2C2C;
color: white;
.dropdown:hover .dropdown-content
display: block;
/* MEDIA QUERY */
@media screen and (max-width: 1100px)
/* ----- disparitoin du menu horizontal --- */
.topnav a, .dropdown .dropbtn
display: none;
background: black;
z-index: 100;
/*show vertical menu open button */
.topnav a.icon
position: absolute;
float: right;
display: block;
top: 0;
margin: 0;
right: 0;
padding: 26px 25px 16px 22px;
border: none;
/* hover / vertical menu close button */
.topnav a.icon:hover
background: black;
border: none;
/* ----------- menu ----------------*/
/*every links with or without dropdown links*/
.topnav.responsive
position: absolute;
background-color: black;
margin: 0;
padding: 0;
width: 100%;
z-index: 204;
letter-spacing: normal;
height: 100vh;
overflow: auto;
/* dropdown menu */
.topnav.responsive .icon
position: absolute;
float: right;
display: block;
border: none;
outline: none;
width: 72px;
height: 72px;
/* dropdown menu */
.topnav.responsive a
width: 100%;
float: none;
display: block;
text-align: left;
padding-left: 35px;
border-bottom: 1px solid #4B4A4A;
/* make the menu vertical */
.topnav.responsive .dropdown
float: none;
/* dropdown menu */
.topnav.responsive .dropdown-content
position: relative;
width: 100%;
margin: 0;
padding-left: 20px;
/* show dropdowm menu links*/
.topnav.responsive .dropdown .dropbtn
display: block;
text-align: left;
width: 100%;
padding-left: 35px;
border-bottom: 1px solid #4B4A4A;
letter-spacing: normal;
/* show open button of the vertical menu*/
.topnav .menu-open
display: block;
/* hide vertical menu close button */
.topnav .menu-close
display: none;
/* hide vertical menu open button*/
.topnav.responsive .menu-open
display: none;
/* vertical menu close button */
.topnav.responsive .menu-close
position: absolute;
display: inline-block;
float: right;
top: 0;
right: 0;
margin: 0;
border: none;
outline: none;
padding: 26px 25px 16px 22px;
@media only screen and (max-width: 500px)
.logo a
font-size: 95%;
padding-bottom: 0px;
box-shadow: 0 1px 0 lightgreen;
【问题讨论】：
【参考方案1】：您只添加了悬停以在 css 中显示子菜单。使用 jquery 单击菜单时，请向菜单项添加“活动”类。
.dropdown.active .dropdown-content
display:block;
【讨论】：
【参考方案2】：感谢 Rayess，我在这里回答您的建议，因为我无法在使用 Add Comment 时使代码看起来不错。
我唯一使用的其他js代码是这个
function myFunction()
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
x.className += " responsive";
else
x.className = "topnav";
您的建议可行吗？我应该如何进行？
【讨论】：
【参考方案3】：我将这个 display:block; 添加到下面的代码中。所以，现在，所有下拉菜单都保持打开状态更好，但我希望我们可以通过点击它们的标题来打开和关闭它们。不知道js怎么用。
/* dropdown menu */
.topnav.responsive .dropdown-content
position: relative;
width: 100%;
margin: 0;
padding-left: 20px;
display:block; /* keep open all the dropdown menus*/
【讨论】：
以上是关于下拉菜单无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
Angular UI Bootstrap 响应式导航栏下拉菜单在新版本中无法正常工作