css 导航栏不显示折叠链接时，在小屏幕(电话屏幕)

zf9nrax1 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(161)

我使用Angular ，需要包括一个JavaScript代码，使折叠的链接在导航栏可以显示时，在较小的屏幕上，而不是它显示的图标与3条，当我点击它不显示链接。此代码在HTML文件上工作。如何在angular中包含此JavaScript代码，以便它可以在较小的/电话屏幕上显示导航栏？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Responsive Navigation Bar - Devbabu.Com</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <div class="wrapper">
            <div class="logo">
                <a href="#"><img src="logo.png" alt="DevBabu.com"></a>
            </div>
            <div class="navbar">
                <div class="close-nav"><button>×</button></div>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="menu-bar">
                <button><i></i></button>
            </div>
        </div>
    </header>
    <div class="container">
        <!-- Content -->
    </div>
    <script>
        const theBody = document.querySelector('body');
        const openNav = document.querySelector('.menu-bar button');
        const closeNav = document.querySelector('.close-nav button');
        const Navbar = document.querySelector('.navbar');

        function showHide(){
            Navbar.classList.toggle('show');
            // bodyScroll();
        }

        openNav.onclick = showHide;
        closeNav.onclick = showHide;
    </script>
</body>
</html>

我试着将这段代码添加到assets中的js文件中，并从那里访问它，但导航栏仍然不起作用。

css

来源：https://stackoverflow.com/questions/76150813/navigation-bar-does-not-show-collapsed-links-when-in-small-screen-phone-screens

1条答案

按热度按时间

ws51t4hk1#

我对你的问题不太确定。正如你所说的，你正在使用angular，我不知道为什么你想把它作为一个js文件嵌入，而不是使用typescript。
我在codesandbox上创建了一个最小的示例，您可以在其中看到如何对单击事件作出React、绑定函数和切换类。
如果这不是问题，请细化您的问题，并提供一个最小的工作示例：）

编辑

我又加了一个例子，希望能回答你的问题。

const theBody = document.querySelector('body');
const openNav = document.querySelector('.menu-bar');
const closeNav = document.querySelector('.close-nav');
const navbar = document.querySelector('.navbar');

openNav.addEventListener("click", () => {
  navbar.classList.add("open");
});

closeNav.addEventListener("click", () => {
  navbar.classList.remove("open");
});

.navbar.open .close-nav, 
.navbar:not(.open) .menu-bar, 
.navbar.open nav {
  display: block;
}

.navbar:not(.open) .close-nav, 
.navbar.open .menu-bar, 
.navbar:not(.open) nav{
  display: none;
}

<header>
  <div class="wrapper">
    <div class="logo">
      <a href="#"><img src="logo.png" alt="DevBabu.com"></a>
    </div>
    <div class="navbar open">
      <button class="close-nav">×</button>
      <button class="menu-bar">Open</button>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>
<div class="container">
  Content goes here
</div>

赞(0）回复(0）举报 2023-05-08

我来回答

css 导航栏不显示折叠链接时，在小屏幕(电话屏幕)

1条答案

编辑

相关问题

热门标签

最新问答