切換下拉列表支持打開

我遇到了切換下拉菜單或列表中的問題。切換下拉列表支持打開

問題是，當我加載頁面時，菜單總是打開（#text_box）。

它應該關閉，所以當用戶點擊「打開我」按鈕後，將打開。

我已將代碼放在JSFiddle上，這裏根本不起作用，它不打開或關閉。我已經複製了所有必要的代碼部分：html，css，javascript。

主要問題是在瀏覽器中打開頁面時，處於開始狀態的菜單/列表始終打開。

此外，我正在使它能夠響應桌面，平板電腦和手機。你能幫我解決這個問題嗎？由於

HTML：

<button onclick="toggle_visibility('text_box');">Open Me</button> 
<div id="text_box"> 
<ul > 
     <li>Test_1</li> 
     <li>Test_2</li> 
     <li>Test_3</li> 
     <li>Test_4</li> 
     <li>Test_5</li> 

</ul>   

</div>

的JavaScript：

function toggle_visibility(id) { 

    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
}

CSS：

button { 
padding: 10px 15px; 
background: #4479BA; 
color: #FFF; 
text-decoration: none; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
border: solid 1px #20538D; 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
-webkit-transition-duration: 0.2s; 
-moz-transition-duration: 0.2s; 
transition-duration: 0.2s; 
-webkit-user-select:none; 
-moz-user-select:none; 
-ms-user-select:none; 
user-select:none; 
} 

button:hover { 
background: #356094; 
border: solid 1px #2A4E77; 
text-decoration: none; 
} 

button:active { 
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
background: #2E5481; 
border: solid 1px #203E5F; 

} 


#text_box { 
width: 200px; 
margin-top: 0px; 
padding: 2px 0px; 
background:rgba(102,102,102,1); 
color: #fff; 

}

來源

2015-09-17 Isabella

看看我的答案，它可能會幫助你。 – divy3993

謝謝大家的幫助。我發現每個答案都有幫助。我將不得不從@ divy3993實施解決方案，因爲我已經使用JavaScript。我也將開始學習和實現JQuery，因爲它很容易和有趣。我將把它用於我的下一個項目。謝謝你們！ :) – Isabella

很高興它幫助你。 – divy3993

多種方式這樣做更好的方式優先下面：

CSS

#foo { display:none;}

JSFiddle : CSS

的JavaScript

document.getElementById("foo").style.display ="none"; /* JavaScript Solution*/

JSFiddle : JS

JQuery的

$("#foo").hide();

注：如果您正在使用JQuery解決方案不要忘了添加jQuery庫

JSFiddle : JQuery

解決方案：

document.getElementById("foo").style.display ="none"; 
 
function toggle_visibility(id) { 
 
\t \t 
 
     var e = document.getElementById(id); 
 
     if(e.style.display == 'block') 
 
      e.style.display = 'none'; 
 
     else 
 
      e.style.display = 'block'; 
 
    }

button { 
 
    padding: 10px 15px; 
 
    background: #4479BA; 
 
    color: #FFF; 
 
\t text-decoration: none; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    border: solid 1px #20538D; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    -webkit-transition-duration: 0.2s; 
 
    -moz-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    -webkit-user-select:none; 
 
    -moz-user-select:none; 
 
    -ms-user-select:none; 
 
    user-select:none; 
 
} 
 
button:hover { 
 
    background: #356094; 
 
    border: solid 1px #2A4E77; 
 
    text-decoration: none; 
 
} 
 
button:active { 
 
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    background: #2E5481; 
 
    border: solid 1px #203E5F; 
 
\t 
 
} 
 

 

 
#foo { 
 
\t width: 200px; 
 
\t margin-top: 0px; 
 
\t padding: 2px 0px; 
 
    background:rgba(102,102,102,1); 
 
    color: #fff; 
 
\t 
 
    }

<button onclick="toggle_visibility('foo');">Open Me</button> 
 
<div id="foo"> 
 
    <ul > 
 
     \t <li>Test_1</li> 
 
      <li>Test_2</li> 
 
      <li>Test_3</li> 
 
      <li>Test_4</li> 
 
      <li>Test_5</li> 
 
      
 
    </ul>   
 

 
</div>

來源

2015-09-17 07:15:21 divy3993

你可以嘗試與格設置要顯示的開始：無。

這種方式總是從零開始。

您還可以探索jQuery作爲選項。

<input id="myButton" type="button" name="answer" /> 

$('#myButton').click(function() { 
    $('#myDiv').toggle('slow', function() { 
    // Animation complete. 
    }); 
});

來源

2015-09-17 07:14:52

只是在CSS display: none啓動股利。

像這樣：

function toggle_visibility(id) { 
 
    var e = document.getElementById(id); 
 
    e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
 
}

button { 
 
    padding: 10px 15px; 
 
    background: #4479BA; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    border: solid 1px #20538D; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    -webkit-transition-duration: 0.2s; 
 
    -moz-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    -webkit-user-select:none; 
 
    -moz-user-select:none; 
 
    -ms-user-select:none; 
 
    user-select:none; 
 
} 
 
button:hover { 
 
    background: #356094; 
 
    border: solid 1px #2A4E77; 
 
    text-decoration: none; 
 
} 
 
button:active { 
 
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
 
    background: #2E5481; 
 
    border: solid 1px #203E5F; 
 
} 
 
#text_box { 
 
    width: 200px; 
 
    margin-top: 0px; 
 
    padding: 2px 0px; 
 
    background:rgba(102, 102, 102, 1); 
 
    color: #fff; 
 
    display: none; 
 
}

<button onclick="toggle_visibility('text_box');">Open Me</button> 
 
<div id="text_box"> 
 
    <ul> 
 
     <li>Test_1</li> 
 
     <li>Test_2</li> 
 
     <li>Test_3</li> 
 
     <li>Test_4</li> 
 
     <li>Test_5</li> 
 
    </ul> 
 
</div>

來源

2015-09-17 07:20:52

我建議你開始學習JQuery的。它使這些事情變得更容易，並且正在迅速成爲做事的標準方式。如果您剛開始使用JavaScript，它可能看起來像是焦點。但是當做簡單的事情時，它會爲你節省很多時間和頭痛。更不用說擊鍵了。

https://jsfiddle.net/abalter/1r29v8tj/9/

HTML

<button id="dropper">Open Me</button> 
<div id="foo"> 
    <ul id="dropdown"> 
     <li>Test_1</li> 
     <li>Test_2</li> 
     <li>Test_3</li> 
     <li>Test_4</li> 
     <li>Test_5</li> 
    </ul> 
</div>

$('#dropper').on('click', function(){ 
    $('#dropdown').toggle(); 
});

CSS

#dropdown { 
    margin: 2px 0px; 
    padding: 2px 0px; 
    display: none; 
}

對於它的價值，我只需切換ul，但這取決於您正在嘗試做什麼。

另外，請查看bootstrap庫，其中有許多靈活的下拉類，它們非常靈活且易於移動。

來源

2015-09-17 07:23:41 abalter

我發現你的解決方案非常有幫助，我有動力去探索和了解更多關於JQuery的知識並開始使用引導程序。謝謝！ – Isabella

更新您到以下

#text_box { 
    width: 200px; 
    margin-top: 0px; 
    padding: 2px 0px; 
    background:rgba(102,102,102,1); 
    color: #fff; 
    display:none; 
}

的#text_box風格我剛纔在裏面添加display:none。

來源

2015-09-17 07:35:56 Arpita

切換下拉列表支持打開

回答

相關問題