Question

所以，我是一个新手，我正在尝试为iPhone制作webapp。

我有一个适用于桌面Chrome的下拉菜单，但由于没有鼠标，我无法弄清楚如何在选择列表后让下拉菜单消失：

＆＃13;

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

＆＃13;

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

＆＃13;

我添加了

onClick=”return true”

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

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

好吧，我不明白this fiddle does exactly what I want是怎样的，但这个网页没有！

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

GoBack

$('#id').change(function(){ $('#id').addClass('hidden'); });特定于文本框和选择元素，因此使用它而不是单击侦听器的好习惯

这是方法证明的小提琴

onchange()

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

Answer 3

更新新小提琴

您可以使用jquery toggle（隐藏/显示）fiddle

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后，Drop Dropdown消失

3 个答案: