如何在下拉列表中選擇值時使用可摺疊菜單

我想在另一個下拉列表中選擇一個值時顯示2個下拉列表。它應該以可摺疊的方式顯示（不需要展開下拉列表）。我不知道這樣做。代碼的小例子足以理解它的工作原理。如何在下拉列表中選擇值時使用可摺疊菜單

這是我期望的例子。但在這應該是下拉列表而不是按鈕。另外2滴淹沒列表應顯示字母顯示的位置。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
    
 
<body> 
 

 
<div class="container"> 
 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Collapsible Button</button> 
 
    <div id="demo" class="collapse"> 
 
    drop down list must collapse from here 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-07-26 Mike

你在找這樣的事情 - http://codepen.io/nagasai/pen/vKjqgG –

沒錯沒錯。但應該沒有什麼變化。只有在下拉列表中選擇一個值後，下拉列表纔會出現。選擇上一個之後也不應該消失。我怎樣才能做出這些改變？ – Mike

看到我的帖子更新codepen - 希望這對你:) –

實現你預期的效果，請使用以下選項

HTML：

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 

<body> 

<div class="container"> 
<select onchange="show()"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
    <div id="demo" class="collapse"> 
    <select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
     <select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
    </div> 
</div> 

</body> 
</html>

JS：

function show(){ 
    document.getElementById('demo').style.display='inline-block'; 

}

CSS：

#demo{ 
    position:relative; 
    top:150px; 
    display:none; 
}

http://codepen.io/nagasai/pen/vKjqgG

來源

2016-07-26 06:16:54

這正是我在尋找什麼。謝謝。 – Mike

謝謝@ user6592730 ..請將我的帖子標記爲已回覆，如果我的回答對你的問題有所幫助:) –

你能幫助我增加它的崩潰時間嗎？（讓更多的時間崩潰）我希望它慢一點。 – Mike

如何在下拉列表中選擇值時使用可摺疊菜單

回答

相關問題