The right to ask bosses how to realize the function of drop-down menu?-CodePudding

click on the arrow can be left closed right away

CodePudding user response:

$(" arrow "). Click (function () {
If ($(" menu "). The CSS (" display ")=="none") {
$(" menu "). The CSS (" display ", "block");
} else {
$(" menu "). The CSS (" display ", "none");
}
});

CodePudding user response:

Is there a big help to solve

CodePudding user response:

reference 1st floor aiweiya520 response:

$(" arrow "). Click (function () {
If ($(" menu "). The CSS (" display ")=="none") {
$(" menu "). The CSS (" display ", "block");
} else {
$(" menu "). The CSS (" display ", "none");
}
});

UI is how to write like this

CodePudding user response:

Are you asking this pattern of this menu is how to write

CodePudding user response:

reference 4 floor aiweiya520 response:

are you asking how do you write this this menu style baa

yes

CodePudding user response:

This is the basis of I wrote about

CodePudding user response:

 
<script SRC="https://cdn.bootcss.com/jquery/3.4.1/jquery.js" & gt; </script> 
 
 Aa
 
 Bb
 
 Cc
 
 Dd
 
 Ee
 
 
 

<style> 
Ul {
Padding: 0 px; 
Margin: 0 px; 
height: 35px; 
} 
Ul li {
list-style: none; 
float: left; 
width: 70px; 
text-align: center; 
font-size: 16px; 
The line - height: 35 px; 
Border - top: 1 px solid black; 
Border - bottom: 1 px solid black; 
} 
Ul li: after {
Content: '|'. 
Padding - left: 15 px; 
} 
</style> 

<script> 
$(' # toggleMenu) on (' click ', function () {
Let the state=$(this). Attr (' status') 
If (state=='close') {
$(this). Attr (' status', 'open'). The text (' fold '). Siblings (" li "). The show () 
} else {
$(this). Attr (' status' and 'close'). The text (' '). Siblings (" li "). Hide () 
} 
}) 
</script>

CodePudding user response:

 & lt; style type="text/css"> 
. The drawer {
position: absolute; 
z-index: 10; 
top: 0; 
left: 0; 
height: 100%; 
Padding: 4 em 0; 
Background: # 030201; 
color: white; 
text-align: center; 
/* Remove 4 px gap between & lt; Li> */
The font - size: 0; 
} 
. The drawer li {
Pointer to the events: none; 
position: relative; 
display: inline-block; 
Vertical - align: middle; 
list-style: none; 
The line - height: 100%; 
The transform: translateZ (0); 

} 
The drawer a {
Pointer to the events: auto; 
position: relative; 
display: block; 
Min - width: 5 em; 
Margin - bottom:. 4 em; 
Padding: 4 em; 
The line - height: 100%; 
Reset the font size *//* 
font-size: 16px; 
text-decoration: none; 
color: white; 
The transition: 0.3 s background; 
} 

. The drawer I {
display: block; 
Margin - bottom: 2 em; 
The font - size: 2 em; 
} 
. The drawer span {
The font, size: 625 em; 
The font-family: Raleway; 
The text - transform: uppercase; 
} 
The drawer li: hover ul {
/* Open the fly out menu */
The transform: translateX (0); 
Background: # 999999; 
/* the Enable this if you wish to replicate hoverIntent */
} 
. The drawer & gt; Li {
display: block; 
/* Add a shadow to the top - level link */
/* Show the shadow when the link is hovered over */
Fly out menus *//* 
} 
. The drawer & gt; Li & gt; A {
Background: # 999999; 
} 
. The drawer & gt; Li: hover {
Z - index: 100; 
} 
. The drawer & gt; Li: hover a {
Background: # 999999; 
} 
. The drawer & gt; Li a: hover {
Background: # 999999; 
} 
. The drawer & gt; Li & gt; A: after {
content: ""; 
position: absolute; 
top: 0; 
Bottom: 0; 
Left: 100%; 
Width: 4 px; 
opacity: 0; 
Background: -- moz -- linear gradient (left, rgba (0, 0, 0, 0.65), 0%, 100% transparent); 
Background: -- its gradient (linear, left, top right top, color - stop (0%, rgba (0, 0, 0, 0.65)), color - stop (100%, transparent)); 
Background: -- its -- linear gradient (left, rgba (0, 0, 0, 0.65), 0%, 100% transparent); 
Background: -o - linear gradient (left, rgba (0, 0, 0, 0.65), 0%, 100% transparent); 
Background: - ms - linear gradient (left, rgba (0, 0, 0, 0.65), 0%, 100% transparent); 
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull