小编P.D*_*ide的帖子

我正在尝试将导航栏与固定顶部类一起使用，以便菜单在折叠时不会下拉页面的元素。但是当我使用固定顶部类时，导航栏将越过容器（宽度），就好像它位于容器流体内一样，而我使用容器类将菜单和站点放在页面中间（不是全宽）。有没有办法让导航栏固定顶部但不是全宽？

这是代码：

<div class="container" style="border: 1px solid;">
        <nav class="navbar fixed-top navbar-expand-lg">
          <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="n-index.php">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Chi Siamo</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Dove Siamo</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contatti</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
    </div> <!-- end container -->

使用 Google 我在 stackoverflow 上找到了这段代码。当用户单击其父元素时，我使用它来显示下拉菜单，当用户再次单击父元素时，下拉菜单消失。我需要添加两个“功能”，但我不知道如何......这是代码：

<script>
$(document).ready(function() {
        $('.parent').click(function() {
            $('.sub-nav').toggleClass('visible');
        });
    });
</script>

<script>
$(document).ready(function() {
        $('.parent2').click(function() {
            $('.sub-nav2').toggleClass('visible');
        });
    });
</script>


<script>
$(document).ready(function() {
        $('.parent3').click(function() {
            $('.sub-nav3').toggleClass('visible');
        });
    });
</script>

<script>
$(document).ready(function() {
        $('.parent4').click(function() {
            $('.sub-nav4').toggleClass('visible');
        });
    });
</script>

<script>
$(document).ready(function() {
        $('.parent5').click(function() {
            $('.sub-nav5').toggleClass('visible');
        });
    });
</script>

这是html：

            <li class="parent">chi siamo
                    <ul class="sub-nav">
                        <li><a href="http://www.sanremoset.it/chi_siamo/carla_evangelista.html">Dott.ssa Carla Evangelista</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/fulvio_torello.html">Dott. Fulvio Torello</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/mauro_evangelista.html">Dott. Mauro Evangelista</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/claudio_lanteri.html">Dott. Claudio Lanteri</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/francine_bontemps.html">Dott.ssa Francine Bontemps</a></li>
                    </ul>
            </li>

                <li class="parent2">prevenzione …