CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jim from Princeton
Jim from Princeton

Reputation: 741

Make Dropdown disappear on click JavaScript

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>

Upvotes: 0

Views: 2857

Answers (3)

Cem Arguvanlı
Cem Arguvanlı

Reputation: 663

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

Upvotes: 1

user5491906
user5491906

Reputation:

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>

Upvotes: 1

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34150

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

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

Upvotes: 1

Related Questions