Hey, I'm new to web development and I'm currently working on creating a web app for iPhone.
Everything is going smoothly except for one issue - my dropdown menu works perfectly on desktop Chrome, but on the iPhone's Safari browser, I can't seem to figure out how to make the dropdown disappear once a selection has been made:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}<div class="dropdown">
<h2><span onClick=”return true” >Select Room</span></h2>
<div class="dropdown-content" id="menucontainer">
<p><a href="#kitchen">Kitchen</a></p>
<p><a href="#family">Family Room</a></p>
<p><a href="#diningRoom">Dining Room</a></p>
<p><a href="#livingRoom">Living Room</a></p>
<p><a href="#cabana">Cabana</a></p>
<p><a href="#guesthouse">Guest House</a></p>
<p><a href="#Patio">Patio</a></p>
<p><a href="#exterior">Exterior</a></p>
<p><a href="#laundryRoom">Laundry Room</a></p>
</div>
</div>To try and solve this problem on Safari, I included
onClick=”return true”
to enable selecting the menu and triggering the dropdown functionality on my iPhone.
**************** EDIT ****************
I came across this fiddle that does exactly what I need, unlike the current state of my webpage!
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$("select-room").click(function(){
$("#menucontainer").toggle();
alert("click");
});
</script>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
</style>
</head>
<body>
<div class="dropdown">
<h2><span class="select-room" onclick="true" >Select Room</span></h2>
<div class="dropdown-content" id="menucontainer">
<p><a href="#kitchen">Kitchen</a></p>
<p><a href="#family">Family Room</a></p>
<p><a href="#diningRoom">Dining Room</a></p>
<p><a href="#livingRoom">Living Room</a></p>
<p><a href="#cabana">Cabana</a></p>
<p><a href="#guesthouse">Guest House</a></p>
<p><a href="#Patio">Patio</a></p>
<p><a href="#exterior">Exterior</a></p>
<p><a href="#laundryRoom">Laundry Room</a></p>
</div>
</div>
</body>
</html>