如何使用引导程序在下拉菜单中创建下拉菜单 [英] How to create dropdown inside dropdown using bootstrap
问题描述
我想创建一个下拉列表,但我不确定它是一个下拉列表还是其他内容,因为我是 HTML 环境的新手.
我想创造的是
当我点击 Indian Spices 时,它必须在里面显示另一个下拉菜单,如果我点击 Pepper in 必须在它下面显示另外两个项目.
这里每个选项都应该在它的父级之下.下拉菜单不能有边框.我需要设计和图片一样的下拉菜单.(没有任何边框)
我在这里尝试过一些东西,但我知道这不是正确的设计方式.https://stackblitz.com/edit/angular-a1deda?file=app%2Fapp.component.html
到这里,我已经接近我的目标了
https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html
谁能指导我解决这个问题...
我想这就是您要找的.您可以自己完成设计的其余部分.检查代码段.
$(document).ready(function () {$('#head__top').on('click', function(){if($('#innerCollapse').is(':visible')) {$('#innerCollapse').hide();}});$('#head__sub').on('click', function() {$('#innerCollapse').fadeToggle(300);});});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="样式表"/><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><div class="col-sm-12"><h4 id="head__top"><a class="font-weight-normal 徽章badge-light bg-white" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">印度香料</a><span class="col-sm-3"></span><span class="col-sm-3"></span><i class="fa fa-angle-down text-fade" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style=字体大小:18px"></i><div class="collapse" id="collapseExample"><h6 id="head__sub"><a class="dropdown-item" role="button" aria-expanded="false"aria-controls="innerCollapse">Pepper<span class="col-sm-3"></span><span class="col-sm-3"></span><i class="fa fa-angle-down" aria-hidden="true" data-toggle="collapse" href="#innerCollapse" role="button" aria-expanded="false"aria-controls="innerCollapse" style="font-size:18px"></i></a>
<div class="collapse col-sm-3" id="innerCollapse"><h6><a class="dropdown-item">Black Pepper</a><a class="dropdown-item">White Pepper</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
I want to create a drop-down, But I am not sure it is a drop-down or something else coz I am new to HTML environment.
What I want to create is
When I clicked on the Indian Spices, It must show another dropdown inside it, and if I clicked on the Pepper in must show another two items under it.
Here each option should comes under it is parent.And drop-down must not have the borders around it .I need to design the drop-down as same as in the image .(Without any borders)
I have tried something here but I know it is not the proper way of design. https://stackblitz.com/edit/angular-a1deda?file=app%2Fapp.component.html
Here I almost near to my goal
https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html
Can anyone guide me to solve this ...
I think this is what you were looking for. You can do the rest bit of the designing yourself. Check the snippet.
$(document).ready(function () {
$('#head__top').on('click', function(){
if($('#innerCollapse').is(':visible')) {
$('#innerCollapse').hide();
}
});
$('#head__sub').on('click', function() {
$('#innerCollapse').fadeToggle(300);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<h4 id="head__top">
<a class="font-weight-normal badge badge-light bg-white" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Indian Spices</a>
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down text-fade" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="font-size:18px"></i>
</h4>
<div class="collapse" id="collapseExample">
<h6 id="head__sub">
<a class="dropdown-item" role="button" aria-expanded="false"
aria-controls="innerCollapse">Pepper
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down" aria-hidden="true" data-toggle="collapse" href="#innerCollapse" role="button" aria-expanded="false"
aria-controls="innerCollapse" style="font-size:18px"></i></a>
</h6>
</div>
<div class="collapse col-sm-3" id="innerCollapse">
<h6>
<a class="dropdown-item">Black Pepper</a>
<a class="dropdown-item">White Pepper</a>
</h6>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
这篇关于如何使用引导程序在下拉菜单中创建下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!