如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 将它们切换为下拉菜单

Posted

技术标签:

【中文标题】如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 将它们切换为下拉菜单【英文标题】：How can I add toggle buttons for navbar items for mobile screen and toggle them for dropdown menu using HTML, CSS and Bootstrap v4 【发布时间】：2021-11-19 14:00:56 【问题描述】：

我在导航栏中悬停时显示下拉菜单以供桌面显示，但为了使其具有响应性，我想在移动屏幕上的导航菜单右侧添加一个按钮并使用它来切换打开和关闭下拉菜单。

我正在寻找的屏幕截图，移动屏幕下拉菜单的切换按钮：

这是我的代码：

.nav-link 
  display: inline-block;
  position: relative;
  color: black;


html,body
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;

.navbar
  padding: .8rem; 





.navbar 
  padding-right: 15px;
  padding-left: 15px;

.navbar .container 
  width: auto;



.cart 
  position: absolute;
  right: 5%;
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;

.navbar-nav li:first-child
  display: none;


@media (max-width: 768px)     

.navbar 
border-radius: 4px;
padding-right: 0;
padding-left: 0;


.navbar-brand
  align-items: center;
  padding-right: 10%;


.navbar-nav li:not(:first-child)
    border-bottom: 1px solid #000;


.navbar-nav li:first-child
    display: block;



#myNavbarToggler13 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 75%;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    bottom: 0;
    max-height: inherit;


.nav-item
    transition: 0.3s;
    padding: 5px 35px 0px;
    /*margin: 5px 0 0 50px;*/



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13"
      aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
<a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand
  <button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler"
      aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation">
  <svg xmlns="http://www.w3.org/2000/svg"   fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
    <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/>
  </svg>
  </button>
</a>

  <div class="collapse navbar-collapse" id="myNavbarToggler13">
      <ul class="navbar-nav mr-auto">
    <li class="nav-item">
              <a class="nav-link" id="crossButton" href="#">X</a>
          </li>
    <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 1</a>
      <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">subitem 1</a>
        <a class="dropdown-item" href="#">subitem 2</a>
        <a class="dropdown-item" href="#">subitem 3</a>
        <a class="dropdown-item" href="#">subitem 4</a>
        <a class="dropdown-item" href="#">subitem 5</a>
      </div>
          </li>
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 2</a>
      <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">subitem 1</a>
        <a class="dropdown-item" href="#">subitem 2</a>
        <a class="dropdown-item" href="#">subitem 3</a>
      </div>
          </li>
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 3</a>
      <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">subitem 1</a>
        <a class="dropdown-item" href="#">subitem 2</a>

      </div>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
          </li>
      </ul>
  </div>

  <div class="collapse navbar-collapse" id="cartToggler">

  </div>
</nav>
<script>
    $(".navbar-toggler ").on('click', function() 
        $navMenuCont = $($(this).data('target'));
        $navMenuCont.animate(
            'width': 'toggle'
        , 350);
        $(".menu-overlay").fadeIn(500);
    );
    $(".menu-overlay").click(function(event) 
        $(".navbar-toggler").trigger("click");
        $(".menu-overlay").fadeOut(500);
    );
    $("#crossButton").click(function(event) 
        $(".navbar-toggler").trigger("click");
        $(".menu-overlay").fadeOut(500);
    );

</script>

【问题讨论】：

【参考方案1】：

您可以使用 jQuery 的 parent、siblings 和 children 选择器并根据需要切换元素的显示。

注意：为了让它工作，你必须删除下拉切换元素的href，否则它会带你到另一个页面

以下示例

$(".navbar-toggler ").on('click', function() 
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate(
        'width': 'toggle'
    , 350);
    $(".menu-overlay").fadeIn(500);
);
$(".menu-overlay").click(function(event) 
    $(".navbar-toggler").trigger("click");
    $(".menu-overlay").fadeOut(500);
);
$("#crossButton").click(function(event) 
    $(".navbar-toggler").trigger("click");
    $(".menu-overlay").fadeOut(500);
);

$('.nav-item .nav-link').click(function()
  $(this).siblings('.dropdown-menu').slideToggle();
  $(this).parent().siblings('li').children('.dropdown-menu').hide();
);
.nav-link 
  display: inline-block;
  position: relative;
  color: black;


html,body
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;

.navbar
  padding: .8rem; 





.navbar 
  padding-right: 15px;
  padding-left: 15px;

.navbar .container 
  width: auto;



.cart 
  position: absolute;
  right: 5%;
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;

.navbar-nav li:first-child
  display: none;


.navbar 
border-radius: 4px;
padding-right: 0;
padding-left: 0;


  .navbar-brand
    align-items: center;
    padding-right: 10%;


.navbar-nav li:not(:first-child)
    border-bottom: 1px solid #000;


.navbar-nav li:first-child
    display: block;



#myNavbarToggler13 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 75%;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    bottom: 0;
    max-height: inherit;


.nav-item
    transition: 0.3s;
    padding: 5px 35px 0px;
    /*margin: 5px 0 0 50px;*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13"
    aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand
    <button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler"
    aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation">
    <svg xmlns="http://www.w3.org/2000/svg"   fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/>
    </svg>
    </button>
</a>

<div class="collapse navbar-collapse" id="myNavbarToggler13">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" id="crossButton" href="#">X</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdown">item 1</a>
            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" >subitem 1</a>
                <a class="dropdown-item" href="">subitem 2</a>
                <a class="dropdown-item" href="">subitem 3</a>
                <a class="dropdown-item" href="">subitem 4</a>
                <a class="dropdown-item" href="">subitem 5</a>
            </div>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdown">item 2</a>
            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">subitem 1</a>
                <a class="dropdown-item" href="#">subitem 2</a>
                <a class="dropdown-item" href="#">subitem 3</a>
            </div>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdown">item 3</a>
            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">subitem 1</a>
                <a class="dropdown-item" href="#">subitem 2</a>
                
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
        </li>
    </ul>
</div>

<div class="collapse navbar-collapse" id="cartToggler">

</div>
</nav>

兄弟姐妹的 jQuery 参考：https://api.jquery.com/siblings/

父级的 jQuery 参考：https://api.jquery.com/parents/

儿童 jQuery 参考：https://api.jquery.com/children/

【讨论】：

以上是关于如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 将它们切换为下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章

向移动视图上的引导导航栏切换按钮添加文本提示

导航栏按钮项目“撰写”在转场期间向右移动

如何为前置摄像头添加开关按钮？

如何为栏按钮添加徽章？

如何为导航到实现底部导航栏的活动中的上一个片段进行后推操作？

如何从标签栏视图控制器切换到另一个作为导航控制器子视图的视图