How do i make an unordered list show and hide when a different div (menu i created) is clicked?
Question
$(".menu").click(function () { if ('.pagelinks').style.display = 'none'; { $('.pagelinks').style.display = 'block'; } else { $('.pagelinks').style.display = 'none'; } })
html,body { margin:0; width: 100%; overflow:hidden; box-sizing: border-box; height: 100%; } body { background: url(best8.jpg); background-repeat:no-repeat; background-size:cover; background-position: center; } header { width: 100%; background-color: black; height: 85px; position: fixed; } .heading1 { color:white; position: relative; align-content: center; margin: 3em ; top: 100px; left: 675px; } .logo img { left: 0; filter: brightness 100%; position: fixed; } .menu { margin: auto; margin-left: 75%; display: block; position: fixed; top: 11px; } .nav div { height: 5px; background-color: white; margin: 4px 0; border-radius: 25px; transition: 0.3s; } .nav { width: 30px; display: block; margin: 1em 0 0 } .one { width: 30px; } .two { width: 20px; } .three { width: 25px; } .nav:hover div { width: 30px; } .pagelinks { margin: auto; margin-left: 49%; position: fixed; top: -10px; display: none; } .pagelinks ul { list-style-type: none; } .pagelinks ul li { float: left; padding:30px; margin: auto; transition: 0.3; color: white; font-size: 20px; font-weight: bold; padding-top: 40px; opacity: 0.6; } .pagelinks ul li:hover { color: green; transition: 0.6s; } .logo img:hover { opacity: 0.6; }
<!DOCTYPE html> <html> <head> <title>Goesta Calculators</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://use.typekit.net/axs3axn.js"></script> <script>try{Typekit.load({ async: true});}catch(e){}</script> <link href="style.css" rel="stylesheet" type="text/css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="main.js" type="text/javascript"></script> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <header> <div class="container"> <div class="row"> <a href="" class="logo"> <img src="NewLogo.PNG" ></a> <div class="menu"> <a href="" class="nav"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </a> </div> <nav class="pagelinks"> <ul> <a href="" class="about"> <li>About</li></a> <a href="" class="contact"><li>Contact</li></a> <a href="" class="calculators"><li>Calculators</li></a> </ul> </nav> </div> </div> </header> <div class="heading1"> <h1>Estimate. Plan your future.</h1> </div> </body> </html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
1 answers
solution1
0 ACCPTED 2019-04-23 02:38:02
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead. Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.