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