单击JavaScript使下拉菜单消失

Question

因此，我是新手，我正在尝试为iPhone开发webapp。

我有一个在台式机Chrome上运行良好的下拉菜单，但是由于没有鼠标，我无法弄清楚一旦做出列表选择后如何使下拉菜单消失：

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

我加了

onClick=”return true”

为了能够选择菜单并将其拖放到我的Safari iPhone上

****************编辑****************

好吧，我不明白这个小提琴到底是怎么做到我想要的，但是这个网页却没有！

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

Answer 1

单击菜单上的链接时，可以隐藏菜单：

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

Answer 2

继承人一个jQuery示例

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

onchange()特定于文本框和选择元素，因此使用它而不是单击侦听器是一种好的做法

这是方法证明的小提琴

 $('#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>

Answer 3

更新新的小提琴

您可以使用jquery toggle （隐藏/显示）小提琴

jQuery的

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

您的标记

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

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

单击JavaScript使下拉菜单消失

问题描述

3 个解决方案

解决方案1
1 2016-07-23 00:02:38

解决方案2
1

解决方案3
0 已采纳 2016-07-23 02:53:24

单击JavaScript使下拉菜单消失

问题描述

3 个解决方案

解决方案1 1 2016-07-23 00:02:38

解决方案2 1

解决方案3 0 已采纳 2016-07-23 02:53:24

解决方案1
1 2016-07-23 00:02:38

解决方案2
1

解决方案3
0 已采纳 2016-07-23 02:53:24