Question

我有一个<div>，其中包含链接，另一个<div>位于第一个下方。

我希望第一个消失，所以：

第二个<div>不动。所以jQuery函数.hide()不是我想要的。
第一个div中的链接变为非活动状态。

是否可以使用javascript或jQuery做到这一点？

PS：如果不可能，我感兴趣的是另一个选项：

第一个<div>隐藏。
第二个<div>逐渐移动。

谢谢，

可乐

编辑2：

你可以看看这个fidle http://jsfiddle.net/XKMEp/5/看看我试图做什么。

编辑：这是我的尝试

$("#div1").click(function() {       
    /*actus.fadeOut('slow');*/
    actus.fadeTo(1000,0).delay(1001).style.visibility = 'hidden';
    $('input,textarea,select,a', '#div1').attr("disabled", true);
});

即使这不起作用：

$("#div1").click(function() {       
    /*actus.fadeOut('slow');*/
    actus.fadeTo(1000,0).delay(1001).style.visibility = 'hidden';
    $('input,textarea,select,a', '#div1').attr("disabled", true);
});

让我们说我的HTML代码是：

<div class="container">
    <div id="div1"></div>
</div>
    <div class="container">
<div id="div2"></div>
</div>


.container{width:300px;height:300px;}

Answer 1

您可能希望将div设置为相同的大小，但如果您想使用JavaScript解决方案，则可以始终使用removeAttr('href')禁用链接并将不透明度更改为0.这样可以显示div已删除，但仍然存在相同的高度而不更改CSS。

$('#first').on('click', function() {
    $(this).css('opacity', '0');
    $(this).children('a').removeAttr('href');        
});

这是jsFiddle solution。如果您将链接存储在数据属性或ID或类似内容中，也可以重新启用所有内容。

Answer 2

$('#second').css({"visibility":"hidden"});
  $('#firstdiv a').click(function(event){
    event.preventDefault();
      }             
);

Answer 3

在这里看我的演示，使用style.visibility实现目标如果你想移动第二个div的位置，请使用style.display; （然而，这个不是逐渐的）

<html>
<head>

<title>div test</title>

<script type="text/javascript">
function show(){
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div1").style.display = "block";

}
function change1(){
document.getElementById("div1").style.visibility = "hidden";
}
function change2(){
document.getElementById("div1").style.display = "none";
}


</script>

</head>

<body>

<div id="div1" style="background:red; height:50px">
    first div: <a href="http://www.hetaoblog.com" target="_blank">a link to http://www.hetaoblog.com</a>
</div>

<div>
    2nd div    allaala   <br />
    <button onclick="show()">show</button>   <br />
    <button onclick="change1()">change1</button>   <br />
    <button onclick="change2()">change2</button>   <br />

</div>


</body>

</html>

Answer 4

可能您可以添加代码以更好地理解您的问题。

典型地

style="display:none;" //will hide the div
style="display:block;" //will display the div

或

style="visibility:hidden" //will hide the div
style="visibility:visible" //will display the div

为了触发这些你可以使用javascript（但首先div应该有ID）

<script>
ns4 = (document.layers) ? true:false
ie4 = (document.all) ? true:false 
ng5 = (document.getElementById) ? true:false

// Works for all browsers irrespective of its release date :p

function hidediv() {
if (ng5) document.getElementById('div1').style.visibility = "hidden"
else if (ns4) document.div1.visibility = "hide"
else if (ie4) div1.style.visibility ="hidden"
}

function showdiv(n){
if (ng5) document.getElementById('div1').style.visibility = "visible";
else if (ns4) document.div1.visibility = "show";
else if (ie4) div1.style.visibility = "visible";
</script>

调用函数隐藏/显示div的

Answer 5

修正......没有放弃。是的，它必须是不透明度（很好地淡化到跨浏览器的不透明度）来保持位置，但是一行jquery就可以了。 http://jsfiddle.net/calder12/XKMEp/24/

你所要做的就是将fermer更改为标签而不是div，并稍微重新设置它们以将它们放在你拥有它们的地方。

    $(".fermer").click(function() {
    $(this).closest('div').fadeTo('slow',0);
    });


     <a href="#" class="fermer">
         fermer
     </a>

Answer 6

使用此类型结构

<div id="main">
 <div id="first">
   <a href="javascript:void(0);" id="link">Hide</a>
</div>
<div id="second">
 content
</div>
</div><!-- Main div -->

Jquery的

 $("#link").click(function() {
  $("#first").hide();
});

如何隐藏div并禁用里面的链接？

6 个答案: