切换下拉列表保持打开状态

Toggle Drop Down List Stays Open

本文关键字：状态下拉列表更新时间：2023-09-26

在我的情况下，我有一个向下切换菜单或列表的问题

问题是，当我加载页面时，菜单总是打开的(#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;
 }

有多种方法更好的方法将放在下面:

CSS

 #foo { display:none;}

jquery: 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) {
		
       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;
	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;
	
}
#foo {
	width: 200px;
	margin-top: 0px; 
	padding: 2px 0px;
    background:rgba(102,102,102,1);
    color: #fff;
	
  }

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

您可以尝试从将div设置为显示:none开始。

这样它总是以none开头。

你也可以把jQuery作为一个选项。

<input id="myButton" type="button" name="answerswer" />
$('#myButton').click(function() {
  $('#myDiv').toggle('slow', function() {
    // Animation complete.
  });
});

在CSS中以display: none开始你的div。

像这样:

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>

我建议你开始学习JQuery。它使这些事情变得如此简单，并且正在迅速成为做事情的标准方式。如果您刚刚开始使用JavaScript，这可能看起来像骗人的把戏。但是当你做一些简单的事情时，它会为你节省很多时间和头痛。更不用说按键了。

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

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

JS

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

CSS

#dropdown { margin: 2px 0px; padding: 2px 0px; display: none; }
为了它的价值，我会切换ul，但这取决于你想做什么。

另外，看看bootstrap库，它有很多灵巧的下拉类，非常通用和移动友好。

将#text_box的样式更新为以下

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

相关文章：
如何使用jQuery选择下拉列表的值

将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection）

Javascript按钮下拉列表

jQuery表单添加不适用于下拉列表

用每小时的差值填充数组/列表-从下拉列表中给定两个时间值

禁用jQuery中的下拉列表

无法使用国家/地区选择中的状态动态填充下拉列表

AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err

保持元素处于禁用状态，直到未在 Angularjs 中选择下拉列表

刷新窗口后，下拉列表未保持选中状态

如何在禁用 JavaScript 的情况下维护下拉列表的持久性状态 - PHP

单击关闭时，使引导下拉列表保持打开状态

单个列筛选不保存下拉列表 jQuery 的状态

单击时使Zurb基金会下拉列表保持打开状态

ASP.NET-在刷新页面后保持下拉列表中所选值的状态，而不使用viewstate和autopostback

检测html选择下拉列表是否处于下拉选择状态

我想在从下拉列表中选择其他选项时激活一个文本框，否则它将保持不活动状态

切换下拉列表保持打开状态

如何使动态下拉列表中的选定值保持选中状态

Knockout JS级联状态/城市下拉列表(使用JSON)