Question

我的情况下切换菜单或列表存在问题。

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

 }

Answer 1

您可以尝试将div设置为display：none。

这种方式总是以无人开始。

你也可以选择探索jQuery。

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

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

Answer 2

多种方法更好地确定优先顺序：

<强> 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) { 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>

Answer 3

在CSS中使用function toggle_visibility(id) { var e = document.getElementById(id); e.style.display = (e.style.display == 'block') ? 'none' : 'block'; }开始你的div。

像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

private static void doSth() {
    Result result = ok(json);
}

＆＃13;

Answer 4

我建议你开始学习JQuery。它使这些事情变得如此简单，并迅速成为标准的做事方式。如果您刚开始使用JavaScript，它可能看起来像hocus pocus。但是在做简单的事情时，它会为你节省大量的时间和麻烦。更不用说击键了。

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>

<强> JS

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

<强> CSS

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

对于它的价值，我只想切换ul，但这取决于你想要做什么。

另外，请查看bootstrap库，它包含许多非常灵活且适合移动设备的光滑下拉类。

Answer 5

将您的#text_box样式更新为以下

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

我刚刚添加了display:none。

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

5 个答案: