wordpress bootstrap 汉堡包菜单

bootstrap中导航条data-toggle=collapse与data-target的联动

理想效果:
当浏览器页面大于768px时,导航条最右侧的菜单按钮隐藏

当浏览器页面小于768px时,可以点击菜单按钮显示、隐藏下拉菜单

代码:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			            <span class="navbar-toggler-icon"></span>
</button>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#primary-menu-wrap" aria-controls="primary-menu-wrap" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
</button>

【class="navbar-toggler】

navbar-toggle效果是隐藏菜单小图标,当屏幕分辨率小于768px时,移除此效果。

【data-toggle="collapse】

效果为此元素会与另一个元素联动,联动效果是显示与隐藏

【data-target="#navbarNavDropdown"】

效果是选中与本元素联动的元素,“引号”内填目标元素的类名或id名

data-toggle用于控制隐藏无序列表,data-target用于指定被作用无序列表

data-toggle的其他属性:

参考:

Bootstrap4 折叠:https://www.runoob.com/bootstrap4/bootstrap4-collapse.html