问题进行简单的jQuery能见度切换

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>

1. 有一个类隐藏和显示，隐藏负荷
2. 股利在按钮点击使用.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的就绪状态回调。这有助于缓解它等待您的元素的绑定，直到DOM准备就绪。 https://jsfiddle.net/t9nxrrbj/1/

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