Question

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

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

Answer 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();
  });
});

Answer 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()切换隐藏和显示

Answer 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 ro你元素的绑定，直到DOM准备就绪。 https://jsfiddle.net/t9nxrrbj/1/

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

简单的jQuery可见性切换问题

3 个答案: