i wan’ to hide #button_ul div when click outside of div anywhere and i’m done with below code but problem is that once i click button it doesn’t slideToggle i wan’t to toggle #button_ul div when i click #edit_btn div
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#edit_btn').click(function(){
$("#button_ul").slideToggle(0);
});
$("body").mouseup(function(e)
{
var button_ul = $("#button_ul");
if (!button_ul.is(e.target) && button_ul.has(e.target).length === 0)
{
$("#edit_btn a").css("background-color" , "rgba(153,153,153,0.6)");
button_ul.css("display" , "none")
}
});
});
</script>
<style type="text/css">
#edit_btn{
border: thin solid #000;
background-color: #666;
padding: 5px;
width: 140px;
text-align: center;
}
#edit_btn a{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
font-weight: bold;
}
#button_ul {
border: thin solid #333;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0px;
border-radius: 0px 0px 4px 4px;
background-color: #ddd;
width: 135px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 5px;
display: none;
}
#link1 {
border: 0px;
width: 100px;
height: 20px;
color: #C03;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#link1:hover {
text-decoration: underline;
}
#link2 {
border: 0px;
width: 100px;
height: 20px;
color: #C03;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#link2:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="edit_btn"><a href="#">Edit Profile Picture</a></div>
<ul id="button_ul">
<li>
<a id="link1" href="#">Upload Picture</a>
</li>
<li>
<a id="link2" href="#">Remove Picture</a>
</li>
</ul>
</body>
</html>