Make Dropdown disappear on click JavaScript

Question

So, I am a newbie and I'm trying to make webapp for iPhone.

I have a dropdown that works well on desktop Chrome, but because there is no mouse, I cannot figure out how to make the dropdown menu disappear once a list choice is 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>

I added

onClick=”return true”

in order to be able to select the menu and get it to drop down on my Safari iPhone

**************** EDIT ****************

Well I don't understand how this fiddle does exactly what I want but this webpage does not!

<!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>

if my answer works for u please consider accepting

user5491906
– user5491906

2016-07-23 06:09:10 +00:00
Commented Jul 23, 2016 at 6:09 — user5491906
– user5491906, Commented Jul 23, 2016 at 6:09

Cem Arguvanlı · Accepted Answer · 2016-07-23 15:57:15Z

1

update for the new fiddle

you can use jquery toggle (hide/show) fiddle

jquery

$(".dropdown").click(function(){
   $("#menucontainer").toggle();
});

your markup

<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>

your css

 .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;
}

edited Jul 23, 2016 at 15:57

answered Jul 23, 2016 at 2:53

Cem Arguvanlı

66311 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jim from Princeton Over a year ago

I'm at my wits end here! Can yo kindly refer to the commented OP?

Cem Arguvanlı Over a year ago

basically when you clicked toggle (its mean .select-room class) add display: none in the #menucontainer, another click then display: block.

Jim from Princeton Over a year ago

Arguvanli I am uncertain what you mean... Did you try the fiddle above and the HTML I posted in the EDIT?

Cem Arguvanlı Over a year ago

check fiddle again

Jim from Princeton Over a year ago

Yes the fiddle does what I want... the HTML i reposted, does not!

|

Ashkan Mobayen Khiabani · Accepted Answer · 2016-07-23 00:02:38Z

1

You can hide the menu when a link on menu is clicked:

$('body').on('click','.dropdown a',function(){
      $('.dropdown').hide();
});

answered Jul 23, 2016 at 0:02

Ashkan Mobayen Khiabani

34.4k35 gold badges112 silver badges187 bronze badges

2 Comments

Jim from Princeton Over a year ago

I'm not clear on the syntax here... '.dropdown a' ? I tried to fiddle this but couldn't get it to work. The menu stays put on select.

Ashkan Mobayen Khiabani Over a year ago

.dropdown a means a tags inside element with class .dropdown

score 1 · Accepted Answer · 2016-07-23 00:09:02Z

1

heres a jquery exmple

$('#id').change(function(){
  $('#id').addClass('hidden');
});

onchange() is specific to textbox and select elements so its good practice to use it rather then click listener

here is a fiddle for method proof

$('#selectElement').change(function(){
  alert("text changed");
});

<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>

<select id="selectElement">
  <option value="val1">val1</option>
  <option value="vl2">val2></option>
</select>

edited Jul 23, 2016 at 0:09

answered Jul 23, 2016 at 0:03

user5491906

Collectives™ on Stack Overflow

Make Dropdown disappear on click JavaScript

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related