I compose a part of the code of my project here to report the problem I am facing. I need to keep the js function to work the links that I put in the top bar.
$(function () {
function setFlatTheme() {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
}
setFlatTheme();
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
});.links > li {
list-style: none;
position: relative;
margin: 10px;
display: inline-block;
}
.rad-dropmenu-item.active {
display: block;
-webkit-animation: flipInX 1s ease;
}
.rad-notification-body {
color: black;
vertical-align: middle;
margin-left: 30px;
}
.rad-logo-container {
width: 225px;
text-align: center;
height: 50px;
float: left;
transition: all 0.2s ease-in-out;
}
.rad-menu-item {
position: relative;
padding: 0 5px;
line-height: 30px;
height: 30px;
color: #89949B;
z-index: 5;
display: inline-block;
}
.rad-dropmenu-item {
position: absolute;
right: -6px;
top: 45px;
min-width: 250px;
background: white;
border: 1px solid #BDBDBD;
border-top: 5px solid #515d6e;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: none;
}
.rad-chk-pin span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
}
.rad-chk-pin span:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.2s ease;
}
.rad-chk-pin input {
display: none;
}
.rad-chk-pin input:checked + span {
background: #23AE89;
}
.rad-chk-pin input:checked + span:after {
left: 19px;
}
.rad-color-swatch {
display: table;
width: 90px;
height: 25px;
border-radius: 4px;
}
.rad-color-swatch .colors {
width: 25px;
height: 25px;
display: table-cell;
cursor: pointer;
}
.rad-color-swatch .colors input[type=radio] {
display: none;
}
.rad-color-swatch .colors:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.rad-color-swatch .colors:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.rad-sidebar.rad-nav-min {
width: 65px !important;
}
@media screen and (max-width: 850px) {
.rad-navigation {
height: 100px;
}
.rad-logo-container.rad-nav-min + .rad-logo-hidden {
display: none;
}
.rad-logo-container {
display: block;
float: none;
width: 100%;
border-bottom: 1px solid #F2F2F2;
}
.rad-top-nav-container {
display: block;
float: none;
height: 50px;
background: white;
}
.rad-sidebar.rad-nav-min {
transform: translate3d(-200px, 0, 0);
}
}
.flat-theme .rad-navigation .rad-top-nav-container .links > li > a {
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display: inline-block;
line-height: 32px;
}
.rad-bg-purple {
background: rebeccapurple;
}
.rad-bg-twitter {
background: #55acee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<a href="#" class="rad-logo"><span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span></a>
<a href="#" class="rad-toggle-btn pull-right"><i class="fa fa-bars acertobar"></i></a>
</div>
<a href="#" class="rad-logo-hidden">xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx</a>
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header"><a href="#">Definições</a></li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<form class="steps" id="inscricao" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<label for="validade" Style="margin-top: 10%;">Data de Validade </label>
<input id="validade" name="validade" type="date" >
</form>
</main>
</body>But when you put this function, you stop opening the calendar in the input with the date type. If you remove the function, the calendar of the input already works. But when I remove the function, I’m unable to close the links on the top bar. Can you help solve this problem?
