Question

初学者。我尝试使用导航图标制作响应式导航栏，转换为x按钮。我无法弄清楚为什么我的导航图标在点击时会被下拉菜单向上推。请参阅下面的我的HTML，CSS和Jquery代码。希望有人能提供帮助。感谢。

HTML：

＆＃13;

<nav id="menu">
  <div class="nav-icon">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <ul class="navbar">
    <li class="selected"><a href="index.html">Home</a>
    </li>
    <li class="dropbtn">Continents
      <div class="dropdown-content">
        <a href="north-america.html">North America</a>
        <a href="south-america.html">South America</a>
        <a href="africa.html">Africa</a>
      </div>
    </li>
  </ul>
</nav>

＆＃13;

CSS：

.nav-icon {
  margin-left: 2em;
  cursor: pointer;
  position: relative;
}
.navbar {
  display: none;
  /*for mobile*/
}
.nav-expanded {
  display: flex;
  flex-direction: column;
  position: absolute;
}

Jquery的：

var $navicon = $(".nav-icon");
var $window = $(window);
var $navbar = $(".navbar");

/*transform nav icon to xbutton*/
function changeIcon() {
    $navicon.children().addClass("change");
}

function hasChangeClass() {
    if ($navicon.children().hasClass("change")) {
        return true;
    }
}

$navicon.click("slow", function() {
    if (!hasChangeClass()) {
        changeIcon();
      $navbar.slideToggle(600, function() {
                $navbar.toggleClass("nav-expanded").css("display", ""); 
            }); 
     } else {
        $navicon.children().removeClass("change");
        $navbar.hide();
     }
});

$window.resize(function resize(){
    if ($window.width() < 768) {
        $navbar.removeClass("nav-expanded");
    }
});

如何防止导航图标被推向上方

0 个答案: