I have been working on an in-house application for a local company and I am trying to use jQuery for a simple button dropdown main page that just links to other places in the app, but when i click on one button they all open at the same time and I am not sure what I need to do to fix it.
I am fairly new to using jQuery but it fits my needs quite well for this web app and any help is appreciated.
It seems like it should be a simple fix i just cant seem to find it anywhere.
CSS -
.main-flex-container {
justify-content: center;
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.main-dropdown {
position: absolute;
}
button {
position: relative;
width: 98vw;
height: 60px;
font-size: 2em;
font-weight: 900;
font-family: "Saira Condensed" , sans-serif;
color: white;
background: #b31e1f;
border: black;
margin: 5px;
box-shadow: none;
outline: none;
cursor: pointer;
}
.main-dropdown ul {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
background: #ccc;
transform-origin: top;
transform: perspective(1000px) rotateX(-90deg);
transition: 0.5s;
}
.main-dropdown ul.active {
transform: perspective(1000px) rotateX(0deg);
}
.main-dropdown ul li {
list-style: none;
}
.main-dropdown ul li a {
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
background: #262626;
color: #fff;
border-bottom: 1px solid rgba(0,0,0,.2);
transition: 0.5s;
}
.main-dropdown ul li a:hover {
background: #b33e3f;
}
#main-caret {
vertical-align: middle;
float: right;
margin: 10px 1em 0 0;
}
HTML:
<body>
<div class="main-flex-container">
<div class="main-dropdown">
<div class="main-dropdown-item">
<button>TODAY <i class="fas fa-caret-down" id="main-caret"></i></button>
<ul class="btn-dropdown">
<li><a href="#">Today</a>
</li>
<li><a
href="#">Map
Todays Jobs</a></li>
<li><a href="#">Timeclock</a></li>
</ul>
</div>
<div class="main-dropdown-item">
<button>FIELD <i class="fas fa-caret-down" id="main-caret"></i></button>
<ul class="btn-dropdown">
<li><a
href="#">Timesheet
Lookup</a></li>
<li><a href="#">Hourly
Listing</a></li>
<li><a href="#">Timeclock
Records</a></li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
// $(document).ready(function () {
// $('button').click(function () {
// $('ul').toggleClass('active')
// })
// })
$(".button").on('click', function (e) {
e.stopPropagation();
var $dropdown = $(this).siblings().fadeToggle();
$('.main-dropdown .btn-dropdown').not($dropdown).fadeOut();
});
$(document).on('click', function (e) {
$('.main-dropdown .btn-dropdown').fadeOut();
});
</script>
</body>
Aucun commentaire:
Enregistrer un commentaire