Question

我有两个div可见，另一个是隐藏。点击可见div将隐藏，隐藏div将可见，代码如下：

CSS

.hide_div{
visibility:hidden;
}
.show_div{
visibility:visible
}

Jquery：

function hideandshow(){
$(document).ready(function(){
    if ($('#hide').is(':visible')) {  
    $("#hide").removeClass('show_div');
    $("#hide").css('visibility', 'hidden');
    };
    if ($('#show').is(':hidden')) {  
    $("#show").removeClass('hide_div');
    $("#show").css('visibility', 'hidden');
    };
    };

HTML

<div id="hide"><input type="text" name="id" value="1" onclick="hideandshow()" /></div>
    <div id="Show" class="hide_div"><input type="text" name="id" value="3" /></div>

请帮我解决这个难题。

Answer 1

使用jQuery方法show()和hide()，而不是使用css属性，

$('#hide').click(function(){
    if ($('#hide').is(':visible')) {  
        $("#hide").hide();
    };
    if ($('#Show').is(':hidden')) {  
        $("#Show").show();
    };
});

<强> HTML

<div id="hide"><input type="text" name="id" value="1" /></div>
<div id="show" style="display: none;"><input type="text" name="id" value="3" /></div>

此外，您的代码在语法上看起来不正确，您还没有正确关闭$(document).ready()并且它在其他函数内部。此外，您还没有在问题中提到要绑定onclick事件的元素。

<强>更新

您的代码中有拼写错误，您的div ID为“显示”，而您在选择器中使用“show”，

$("#show").css('visibility', 'hidden');

DEMO FIDDLE

Answer 2

试试这个：因为:visible选择器在这里不起作用，因为认为visibility: hidden或opacity: 0的元素可见，请检查此链接:visible并同样适用于{{ 3}}

if ($('#hide').css('visibility') == 'visible') { 
    $("#hide").removeClass('show_div');
    $("#hide").css('visibility', 'hidden'); 
}

if ($('#Show').css('visibility') == 'hidden') { 
    $("#Show").removeClass('hide_div');
    $("#Show").css('visibility', 'visible'); 
}

你的函数定义不需要用$（document）.ready

括起来

面对难以控制可见的div将隐藏，隐藏的div将使用jquery可见

2 个答案: