简单的 jQuery 可见性切换问题答案

【问题标题】：Issues with simple jQuery Visibility toggle简单的 jQuery 可见性切换问题
【发布时间】：2016-10-29 02:34:59
【问题描述】：

无法弄清楚为什么这不起作用...

HTML

<button id="new_user">+ Create a New User</button>
<div id="create_user" style="visibility:hidden">Test</div>

jQuery

$('#new_user').click(function(){
  if ($('#create_user').css('visibility') == "hidden"){
      $('#create_user').css("visibility","visible");
  } else {
      $('#create_user').css("visibility","hidden");
  }
});

【问题讨论】：

写你的代码来玩codepen.io/anthonyastige/pen/mERYRd
什么不起作用？对我来说，它有效！ jsfiddle.net/t9nxrrbj
您的代码运行良好。检查控制台是否有错误。另请注意，您可以通过调用$('#create_user').toggle(); 来简化此操作很多
@Nicole 你包含了 jQuery 吗？
@Nicole 给我看看你的小提琴！

标签： jquery html visibility

【解决方案1】：

无需检查可见性，您可以简单地使用 toggle()

<button id="new_user">+ Create a New User</button>
<div id="create_user" style="display:none">Test</div>

jQuery

$(document).ready(function() {
  $('#new_user').click(function() {
    $('#create_user').toggle();
  });
});

【讨论】：

【解决方案2】：

$('#new_user').click(function(){
      $('#create_user').toggleClass("hide show");//toggel class to hide or show
});

.hide{visibility:hidden}
.show{visibility:visible}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new_user">+ Create a New User</button>
<div id="create_user" class='hide'>Test</div>

有一个类隐藏和显示，在加载时隐藏 div
点击按钮时使用.toggleClass() 切换隐藏和显示

【讨论】：

【解决方案3】：

您的代码运行正常。 https://jsfiddle.net/t9nxrrbj/
但我更喜欢show、hide 或者只是toggle：

$('#new_user').click(function() {
    $('#create_user').toggle();
});

或

$('#new_user').click(function() {
    if( !$('#create_user').is(':visible') ) {
        $('#create_user').show();
    } else {
        $('#create_user').hide();
    }
});

然后将您的代码置于 jQuery 的就绪状态回调中。这会有所帮助，因为它会等待 click 绑定到您的元素，直到 DOM 准备好。 https://jsfiddle.net/t9nxrrbj/1/

$(function() {
    $('#new_user').click(function() {
        $('#create_user').toggle();
    });
});

【讨论】：