1
Ich versuche, Dropdown-Menü klicken zu implementieren ..Jquery- Dropdown-Menü auf Klick implementieren
Ich habe den folgenden Code bisher geschrieben: -
<div class="sub_nav_main_wrap">
<div class="sub_nav_wrap">
<div id="subnavabc" class="menuabc">
<ul class="sub_navbc">
<li>
<a id="subnavdiv1" href="#" class="sub_navbc_link" onclick="myFunction()">Recommendations (30)</a>
<ul class="submenu" id="secondDD1">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
</ul>
</li>
<li>
<a id="subnavdiv2" href="#" class="sub_navbc_link" onclick="toggleColors()">Preferred (999+)</a>
</li>
<li>
<a href="#" class="sub_navbc_link">Discover (999+)</a>
</li>
<li>
<a href="#" class="sub_navbc_link">Broader Matches</a>
</li>
<li class="more_list">
<a href="#" class="sub_navbc_link">More<span class="sub_navbc_more"></span></a>
<div class="sub_navbc_more_list_wrap">
<div class="sub_navbc_more_list_arrow"></div>
<a href="#" class="sub_navbc_more_list">Reverse Matches</a>
<a href="#" class="sub_navbc_more_list">2 Way Matches</a>
<a href="#" class="sub_navbc_more_list">Shortlists</a>
<a href="#" class="sub_navbc_more_list">Viewed</a>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
Ich möchte einen Klick auf Empfehlung umzusetzen und die Drop-Down-Menüpunkte sollten in der es für eg..Menu1 haben und so weiter ..
ich über den folgenden JavaScript-Code zu implementieren versucht: -
function myFunction() {
document.getElementById("secondDD1").classList.add('show');
}
window.onclick = function(event) {
if (!event.target.matches('.sub_navbc_link')) {
var dropdowns = document.getElementsByClassName("submenu");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
wo die Show zu display:block verwendet wird, sobald ich darauf klicke.
meine CSS sieht wie folgt aus: -
#topnavabC#wrap2 {
height: auto;
}
.top_navbc_wrap{
background: #ff5a60;
font: normal 16px 'Roboto', sans-serif;
}
.top_navbc_inner_wrap{
width: 1060px;
margin: 0 auto;
position: relative;
}
.top_nav_section{
float: left;
text-align: center;
}
.nav_main_logo, .top_navbc{
display:inline-block;
}
.top_navbc li{
float: left;
position: relative;
background: #ff5a60;
}
.top_navbc li a{
display: block;
text-decoration: none;
color: #fdedee;
padding: 18px 25px 16px;
transition: color 0.2s ease 0s;
}
.top_navbc li a:hover{
color: #fff;
transition:transform 250ms ease 0s;
}
.nav_log_wrapper{
padding: 13px 0 0;
position:relative;
width: 110px;
margin: 0 auto;
}
.top_navbc_hbadge{
position: absolute;
background:url(http://img2.shaadi.com/assests/2016/images/badge-cap.png) no-repeat center top;
width: 110px;
height: 11px;
margin: -11px 0 0;
}
.bg_img{
display: inline-block;
background: #fbfbfc;
border: 1px solid #dddddf;
border-top: none;
height: 40px;
margin: 10px auto 0;
width: 66px;
box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
border-radius: 0 0 5px 5px;
transition:height 0.5s ease-in-out;
overflow: hidden;
}
.top_navbc_hbadge a{
display: block;
text-align: center;
z-index: 900;
}
.top_navbc_hbadge:hover .bg_img{
height: 90px;
}
.top_navbc_count{
position: absolute;
top:8px;
left: 90px;
z-index: 1;
padding: 0 5px;
margin: 0 0 0 -3px;
border-radius:50px;
background:#fff;
color: #51505d;
font: normal 12px 'Roboto', sans-serif;
}
.top_navbc_active{
background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat center bottom;
color: #fff !important;
}
.nav_help_section{
display: inline-block;
height: 18px;
padding: 26px 0 6px 10px
position: relative;
cursor: pointer;
}
.helpabc_wrap{
float: right;
width: 215px;
margin: 9px 0 0;
font-size: 16px;
}
#wrap2 .helpabc_wrap #login_section {
float: left;
margin: 0;
height: 36px;
}
.top_navabc_pro_img{
background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
width: 53px;
float: left;
}
.top_navbc_inner_wrap #login_section .thumb img{
border: none;
}
#wrap2 .top_navbc_inner_wrap #login_section .thumb{
width:32px;
height: 32px;
display: inline-block;
margin: 2px 0 0 3px;
border: 1px solid #e5e5e5;
}
.top_navabc_pro_upgrade, .top_navabc_pro_help{
background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
float: left;
width: 75px;
color: #fff;
margin: 6px 0 0;
}
.top_navabc_pro_help{
width: 48px;
}
.top_navabc_pro_upgrade:hover, .top_navabc_pro_help:hover{
text-decoration: none;
}
.top_navabc_help_sept{
border-right: 1px solid #ff7b80;
float: left;
width: 1px;
height: 28px;
margin: 5px 8px 0;
}
.sub_nav_main_wrap{
font: normal 14px 'Roboto', sans-serif;
text-align: center;
background: #fff;
}
.sub_nav_wrap{
width: 960px;
margin: 0 auto;
}
.sub_navbc li{
float: left;
margin: 0 21px 0 0;
position: relative;
}
a:active{
background: none;
}
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
color: #72727d;
display: block;
position: relative;
padding: 13px 8px 12px;
transition: color 0.2s ease 0s;
text-decoration: none !important;
}
.sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{
background: #ff5a60;
bottom: 0;
content: "";
display: block;
height: 3px;
left: 0;
position: absolute;
transform: scaleX(0);
transition: transform 250ms ease 0s;
width: 0;
}
.sub_navbc li .sub_navbc_link:hover{
text-decoration: none !important;
color: #ff5a60 !important;
}
.sub_navbc_active{
color: #ff5a60 !important;
}
.sub_navbc_active::after{
width: 100%;
transform: scaleX(1);
}
/*
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
color: #72727d;
display: block;
position: relative;
padding: 13px 8px 12px;
text-decoration: none !important;
}
.sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{
background: #ff5a60;
bottom: 0;
content: "";
display: block;
height: 3px;
left: 0;
position: absolute;
transform: scaleX(0);
transition: transform 250ms ease 0s;
width: 0;
}
.sub_navbc li .sub_navbc_link:hover{
text-decoration: none !important;
color: #ff5a60 !important;
transition: color 0.2s ease 0s;
}
.sub_navbc_active{
color: #ff5a60 !important;
}
.sub_navbc_active::after{
width: 100%;
transform: scaleX(1);
}
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
display: block;
text-decoration: none;
padding: 13px 8px 9px;
color: #72727d;
transition: color 0.2s ease 0s;
}
.sub_navbc li .sub_navbc_link:hover, .sub_navbc_active{
text-decoration: none !important;
color: #ff5a60 !important;
transition:transform 250ms ease 0s;
}
.sub_navbc_active{
border-bottom: 3px solid #ff5a60;
}
*/
.sub_navbc li.more_list{
float: left;
margin: 0;
position: relative;
}
.sub_navbc li.more_list .sub_navbc_link{
background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn.png) no-repeat right 21px;
padding: 13px 16px 12px 8px;
}
.sub_navbc li.more_list .sub_navbc_link:hover{
background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn-hvr.png) no-repeat right 21px;
padding: 13px 16px 12px 8px;
}
.sub_navbc_more_list_wrap{
background: #fff;
box-shadow: 0 1px 12px rgba(43, 59, 93, 0.35);
border-radius: 3px;
width: 150px;
font-size: 14px;
position: absolute;
left: 2px;
top: 40px;
text-align: left;
z-index: 1;
}
.sub_navbc_more_list_arrow{
background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat left top;
width: 14px;
height: 7px;
position: absolute;
left: 43px;
top: -7px;
}
.sub_navbc_more_list {
display: block;
padding: 10px 19px;
color: #72727d;
}
.sub_navbc_more_list:hover{
background: #f1f1f2;
color: #72727d;
text-decoration: none;
}
Bin ich etwas falsch zu machen, oder gibt es eine Abhilfe für this..Please help..I haben durch viele Tutorials gegangen und bin immer in dieser Frage stecken.
Sein nicht working..Any für HTML im Code vorgenommenen Änderungen ?? – Jonases
@Jonases ya, nur dieses Attribut onclick = "myFunction (this)" –
sein Schließen auf seine eigene..Ist es wegen der Hover-Effekt-Code Ich habe geschrieben in – Jonases