Javascript 和 jQuery 隐藏和显示不起作用答案

【问题标题】：Javascript and jQuery hide and show not workingJavascript 和 jQuery 隐藏和显示不起作用
【发布时间】：2014-12-10 15:37:02
【问题描述】：

单击“单击我！”按钮时，我试图隐藏和显示联系表单（使用 display:"none" 和 display:"block"）。我尝试了多个 javascript 和 jquery 示例，但它们似乎都不适合我。如果表单可以在单击我按钮下滑入和滑出，那就太好了。

有人可以帮助我吗？

访问此链接查看我的代码http://jsfiddle.net/jm2o73f2/9/

function myFunction() {
    var x = document.getElementById("hidden");
    x.style.
}

body, img, ul, li, div, input, textarea {
    margin:0;
    padding:0;
    
}
#footer {
    width:100%;
    background:#CCC;
    clear:both;
    margin-bottom:-20px;
}
#footer img {
    cursor:pointer;   
}
#footer ul {
    list-style:none;
    width:250px;
    padding-top:10px;
    margin: 0 auto;
    text-align:center;
}
#footer #contact {
    width:400px;
    margin:auto;
    display:block;
    background:white;
    text-align:left;
}
#footer #contact textarea {
    width:250px;
    resize:none;
}
#footer #contact input {
    width:250px;
    margin: 5px 0;
}
#footer #contact input[type="submit"] {
   width:100px; 
    cursor:pointer;
}

<body>
  <div id="footer">
        <div id="contact">
            <ul><li>Vragen? Stuur ons gerust een email.</li><li><button type="button" onclick="myFunction()">Click Me!</button></li></ul>
            <div id="hidden">
            <ul><li><input type="text" name="naam" id="naam" /></li><li><input type="text" name="email" id="email" /></li><li><textarea  name="condolatie" id="condolatie" cols="45" rows="5"></textarea></li><li><input type="submit" name="submit" id="submit" value="Verzend" /></li></ul></div>
        </div>
    </div>  
</body>

【问题讨论】：

你能把你的代码贴在这里吗？
我也会对网站的链接有所帮助。
该网站尚未上传。这是我在 jsfiddle jsfiddle.net/jm2o73f2/9 上的代码，希望对您有所帮助。
在 JavaScript 中......第 3 行......：x.style.
非常感谢大家！感谢你们，我找到了一些可行的解决方案。对不起我初学者的错误，我还有很多东西要学:)

标签： javascript jquery

【解决方案1】：

没有看到您的代码的简单解决方案是：

$(function(){
    $('.revealButton').click(function(){
        $('.hiddenDiv').toggle();
    });
});

希望这会有所帮助，但是，一旦您的代码在这里，我将更新此答案:)

更新

这是一个适合您的 jQuery 版本：jsFiddle

$(function () {
    $('.revealButton').click(function () {
        $('#hidden').toggle();
    });
});

另外，在您的按钮上删除 onClick="myFunction()" 并添加 class="revealButton"。

就是这样。

更新 2

如果您想要幻灯片动画（如 cmets 中所述），请使用：jsFiddleUpdate

$(function () {
    $('.revealButton').click(function () {
        $('#hidden').slideToggle();
    });
});

【讨论】：

@Kenkey 如果你想要幻灯片动画，你可以使用.slideToggle() 而不是.toggle()。我注意到您在问题中提到了这一点。

【解决方案2】：

您需要将代码放在头部或正文末尾之前。然后您需要检查元素是否隐藏并执行适当的操作

function myFunction() {
  var x = document.getElementById("hidden").style;
  x.display === 'none' ? x.display = 'block' : x.display = 'none';
  // is display none ? set to block else set to none
}

function myFunction() {
  var x = document.getElementById("hidden").style;
  x.display === 'none' ? x.display = 'block' : x.display = 'none';
}

body, img, ul, li, div, input, textarea {
    margin:0;
    padding:0;
    
}
#footer {
    width:100%;
    background:#CCC;
    clear:both;
    margin-bottom:-20px;
}
#footer img {
    cursor:pointer;   
}
#footer ul {
    list-style:none;
    width:250px;
    padding-top:10px;
    margin: 0 auto;
    text-align:center;
}
#footer #contact {
    width:400px;
    margin:auto;
    display:block;
    background:white;
    text-align:left;
}
#footer #contact textarea {
    width:250px;
    resize:none;
}
#footer #contact input {
    width:250px;
    margin: 5px 0;
}
#footer #contact input[type="submit"] {
   width:100px; 
    cursor:pointer;
}

<div id="footer">
  <div id="contact">
    <ul>
      <li>Vragen? Stuur ons gerust een email.</li>
      <li>
        <button type="button" onclick="myFunction()">Click Me!</button>
      </li>
    </ul>
    <div id="hidden">
      <ul>
        <li>
          <input type="text" name="naam" id="naam" />
        </li>
        <li>
          <input type="text" name="email" id="email" />
        </li>
        <li>
          <textarea name="condolatie" id="condolatie" cols="45" rows="5"></textarea>
        </li>
        <li>
          <input type="submit" name="submit" id="submit" value="Verzend" />
        </li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

使用 JQuery，你应该使用：

$("#hidden.isHidden").show().removeClass("isHidden");

从其 ID“隐藏”中显示您的元素，并隐藏它：

$("#hidden").hide().addClass("isHidden");

编辑：

您还可以使用此代码来检测您的元素是否隐藏：

if ($("#hidden").is(':hidden')) { ... }

并测试是否显示：

if ($("#hidden").is(':visible')) { ... }

【讨论】：