.
. .
.
.
(
*
)
.
.
(
*) .
.
.
.
.
.
.
.
.
.
.
(
*
)
.
.
.
.
.
.
(
*
)
.
. . .
. .(* ) . . . . . . . . .(* ) . . . . . . . . . . . . .(* ) . . . . . . . . . . . . . .(* ) . Asked . today . .
. 7 times .
I produced a solitary straight food selection making use of CSS, HTML as well as jquery. When somebody clicks a food selection product after that it shows a sub-menu. My issue is that when a submenu is currently open as well as I click an additional food selection product after that it reveals the brand-new submenu however it does not conceal the previous food selection which is currently open as well as the exact same occurs with the dark history layer aspect ( bg_submenu ) Likewise I wish to conceal the currently open submenus () when I click outside them. I attempted to utilize the approach
e.stopPropagation ()(* )however it really did not function. Exactly how can i make it function by doing this making use of jquery? Any type of aid would certainly be quite valued.$(“. menus_li”). click( feature( e) {
$(“. blocks_ul”, this). toggleClass(‘ submenu-is-active’);
$(“. bg_submenu”). toggleClass(‘ program’);
} ); {a shade: #fff;
text-decoration: none;
}
li {
list-style: none;
}
. top-menu {
z-index: 2;
placement: dealt with;
leading:0;
left:0;
size:100%;
display screen: flex;
size: 100%;
history: # 0088ff;
extra padding: 1rem;
margin:0;
}
. menus_li {
font-weight: strong;
margin-left: 1rem;
}
. blocks_ul {
display screen: none;
placement: outright;
history: #fff;
top: 100%;
min-width: 120px;
border-radius: 8px;
extra padding: 1rem;
}
. blocks_ul {a shade: # 000;
}
. blocks_ul li {
padding-left: 10px;
font-weight: typical;
extra padding: 0.4 rapid eye movement 0.7 rapid eye movement;
}
. blocks_ul. submenu-is-active {
display screen: block;
}
. bg_submenu {
background-color: rgba( 0, 0, 0, 0.6);
placement: dealt with;
top: 0;
left: 0;
size: 100%;
elevation: 100%;
z-index: 1;
display screen: none;
}
. bg_submenu. program {
display screen: block;
}
<< manuscript src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><> < html>>.
<< body>>.
<< div course=" bg_submenu"><> < ul course=" top-menu">
<> < li course=" menus_li"><> < a href=" #">> Automobiles +<.
<< ul course=" blocks_ul">
<> < li><> < a course=" menu-link" href=" #">> Mercedes< < li><> < a course=" menu-link" href=" #">> Jeep< < li><> < a course=" menu-link" href=" #">> Ford< < li><> < a course=" menu-link" href=" #">> BMW< < li><> < a course=" menu-link" href=" #">> Tesla< .
<.
<< li course=" menus_li"><> < a href=" #">> Computer systems +<.
<< ul course=" blocks_ul">
<> < li><> < a course=" menu-link" href=" #">> Apple< < li><> < a course=" menu-link" href=" #">> Lenovo< < li><> < a course=" menu-link" href=" #">> HP< < li><> < a course=" menu-link" href=" #">> Dell< < li><> < a course=" menu-link" href=" #">> Acer< .
<.
<.
<.
<
. asked 4 minutes back
. Developer
Developer
.
842 7 7 silver badges
22 22 bronze badges
.
(
*
)
1
default(
*
) .
.
.
.
.
.
.
.
.
. . . . . . .
.(* )
.(* )
. (* )
. Your personal privacy
.(* )
. By clicking “Approve all cookies”, you concur Heap Exchange can save cookies on your tool as well as divulge info based on our Cookie Plan
.(* )
.
Approve all cookies
.
.
Tailor setups
.
.
(
*)
.
.
.
.
. . . .
. .
