roli roli roli roli - 5 months ago 31
jQuery Question

User settings dropdown menu


I have the below code


<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<h1>Stylish User Settings Menu</h1>

<div id="dropdown" class="ddmenu">
Landi <img src="../images_app/off.png" width="20" height="20" style="margin-left:100px">
<ul>
<li><a href="#">My Profile</a></li>
<li><a href="#">Friend Requests</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$("#dropdown").on("click", function(e){
e.preventDefault();
if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).children("ul").slideUp("fast");
} else {
$(this).addClass("open");
$(this).children("ul").slideDown("fast");
}
});
</script>
</body>
</html>



So,my problem is in href="#"!! when i fill the href tag for example example.html it is not working...So when i remove the script that content jquery1.8.2 then the href tag works but all my project destroyet(looks ugly)
Any solution how to solve my problem without remove the jquery?

Answer

The problem is that you are preventing default action (in this case the href) with e.preventDefault();. You need to delete it to make the <a> works. Also add target="_blank".

Here's a working example