如何解决我想要这样的垂直菜单请参阅图片以供参考
我想创建一个垂直下拉菜单。我正在使用Bootstrap中的列表组和列表组项目类。任何人都可以帮助我,如何单击一个项目打开子菜单,它应该在具有黑色边框的同一div中打开。有人可以帮助我该怎么做?
这是我的HTML和CSS代码。
HTML
import React,{ Component } from 'react';
function PostAdForm() {
return (
<div className="container postAd-container text-center">
<h6 className="text-left p-3">CHOOSE A CATEGORY</h6>
<ul className="list-group w-50">
<li className="list-group-item d-flex justify-content-between align-items-center">
Mobiles
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span>
</li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Vehciles
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span>
</li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Property for Sale
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Property for Rent
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Electronics & Home Appliances
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Bikes
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Business,Industrial & Agriculture
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Services
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Jobs
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Animals
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Furniture & Home Decor
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Fashion & Beauty
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Books,Sports & Hobbies
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
<li className="list-group-item d-flex justify-content-between align-items-center">
Kids
<span className="badge badge-pill">
<i class="fas fa-chevron-right"></i>
</span> </li>
</ul>
</div>
);
}
export default PostAdForm;
CSS
.postAd-container {
padding: 0 !important;
border: 1px solid #6c757d;
width: 70% !important;
}
.list-group {}
.list-group-item {
color: #6c757d !important;
font-weight: 600;
cursor: pointer;
}
.list-group .list-group-item:hover {
background-color: rgba(0,47,52,.2) !important;
color: #000 !important;
}
.fa-chevron-right {
font-size: 20px !important;
color: #6c757d !important;
}
解决方法
要考虑的两件事。
#1将FA库用于图标。 (我为演示添加了自己的CDN托管代码段)
#2使用jQuery控制滑块的打开和关闭。
我为您制作了一个原始演示,供您使用,然后在您自己的案例研究中加以评论
$('.primary-i').click(function() {
$('.secondary').toggleClass('open'); //this adds the class .open or removes it if its already there (thus closing and opening the .secondary class element by reducing its width back to 0 or augmenting it to 180px //
});
nav {
position:relative;
}
.primary-i {
cursor:pointer;
}
.primary,.secondary {
width:180px;
}
.primary-i,.secondary-i {
display:flex;border:1px solid black;
padding:4px;width:150px;
}
.primary-i i:nth-child(1),.secondary-i i:nth-child(1) {
margin-right:10px;
}
.primary-i i:nth-child(3),.secondary-i i:nth-child(3) {
margin-left:70px;
}
.secondary {
width:0!important;overflow-x:hidden;
}.secondary.open {
width:180px!important;transition:0.5s ease;
}
.secondary {
position:absolute;top:0;left:158px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-9ZfPnbegQSumzaE7mks2IYgHoayLtuto3AS6ieArECeaR8nCfliJVuLh/GaQ1gyM" crossorigin="anonymous">
<nav>
<div class="primary">
<div class="primary-i">
<i class="fa fa-shopping-cart"></i><span>Item</span>
<i class="fa fa-angle-right"></i>
</div>
<div class="primary-i">
<i class="fa fa-shopping-cart"></i><span>Item</span><i class="fa fa-angle-right"></i>
</div>
<div class="primary-i">
<i class="fa fa-shopping-cart"></i><span>Item</span><i class="fa fa-angle-right"></i>
</div>
<div class="secondary">
<div class="secondary-i">
<i class="fa fa-shopping-cart"></i><span>Item</span>
</div>
<div class="secondary-i">
<i class="fa fa-shopping-cart"></i><span>Item</span>
</div>
</div>
</div>
</nav>
Codepen可以和https://codepen.io/thewhitegrizzzzli/pen/qBNNNgG一起玩
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。