Question

几天前，我开始从事我的一个个人项目，这是一个基于php的网站，可以简单地生成随机单词。一切都进行得很顺利，直到我开始为我的项目开发导航栏。首先，我成功添加了一些链接。然后是一个品牌，效果也很好。当我最小化页面时，calliopes菜单也可以正常工作。问题出在我开始添加另一个下拉菜单时，该下拉菜单是块状，绿色且右对齐的。

如果我没有最小化页面，则一切正常。我的绿色下拉按钮出现，并且一切正常：

现在有点复杂了。如果我最小化页面，那么一切仍然有效：

但是，如果我打开汉堡包/折叠下拉菜单并且不关闭它，然后完全最大化并再次最小化我的页面，绿色的下拉按钮就会消失（如果该按钮仍然显示，请再次最大化和最小化它消失了）：⬇

我不知道为什么会这样，并试图找出答案，但是到目前为止，没有任何效果。这是我的代码：

<nav class="navbar navbar-default custom-navbar">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container-one">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?=PROOT?>home"><?=MENU_BRAND?></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="right-side">
      <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn"><i onclick="myFunction()" class="glyphicon glyphicon-user"></i></button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* 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>
    </div>

        <ul class="nav navbar-nav right-side collapse navbar-collapse" id="main_menu">
          <?php foreach($menu as $key => $val):
            $active = ''; ?>
            <?php if(is_array($val)): ?>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?=$key?> <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <?php foreach($val as $k => $v):
                    $active = ($v == $currentPage)? 'active':''; ?>
                    <?php if($k == 'separator'): ?>
                      <li role="separator" class="divider"></li>
                    <?php else: ?>
                      <li><a class="<?=$active?>" href="<?=$v?>"><?=$k?></a></li>
                    <?php endif; ?>
                  <?php endforeach; ?>
                </ul>
              </li>
            <?php else:
              $active = ($val == $currentPage)? 'active':''; ?>
              <li><a class="<?=$active?>" href="<?=$val?>"><?=$key?></a></li>
            <?php endif; ?>
          <?php endforeach; ?>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <?php if(Users::currentUser()): ?>
            <li><a href="#">Hello <?=Users::currentUser()->fname?></a></li>
          <?php endif; ?>
        </ul>
</nav>

<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>

我尝试过在线和堆栈溢出时寻找答案，但是没有找到有效的答案。任何帮助表示赞赏

打开其他下拉菜单后，下拉菜单将消失

0 个答案: