jQuery的显示/隐藏点击隐藏链接

Question

林两个div隐藏这两项的divs一次，然后使链接消失？

Answer 1

a。您最好使用class而不是id，其中两者共享相同的值（例如条目）

<div class=entry> 
    <div id=label>Street</div> 
    <div id=input><input name="" type="text" class="longtext" /></div></div> 
<div class=entry> 
    <div id=label>City/Town</div> 
    <div id=input><input name="" type="text" class="longtext" /></div></div> 

b。隐藏的div都可以做到：

$('.entry').hide(); 

躲在被点击链接

$(this).hide(); 
return true; 

例如

<a id='myLinkId' href='#'>Click To Hide</a> 

$('a#myLinkId').click(function(){ 
    $('.entry').hide(); 
    $(this).hide(); 
    return true; 
}); 

Answer 2

ID必须是唯一的，所以我已将ID更改为类。另外，我已经从在线到是不显眼的jQuery的改变了代码会像下面

$(function() { 
    $('#addressLink').click(function() { 
     $('div.entry').toggle(); 
     $(this).hide(); 
     return false; // prevent the default anchor behaviour 
    });  
}); 


<a id="addressLink" href="#">Add a Street Address</a> 
<div class="entry"> 
    <div class="label">Street</div> 
    <div class="input"><input name="" type="text" class="longtext" /></div> 
</div> 
<div class="entry"> 
    <div class="label">City/Town</div> 
    <div class="input"><input name="" type="text" class="longtext" /></div> 
</div> 

假设你想要的<div>元素最初隐藏，只需添加$('div.entry').hide();到文档准备好处理程序。有迹象表明，你可以在这里使用其他技术，但我会建议使用JavaScript躲藏graceful degradation目的

这里有一个Working Demo。添加/编辑到URL查看代码

Answer 3

先举一个ID像“链接”你的链接标签，然后给你两个跳两个不同的ID，然后写一个js函数是这样的：

show_hide = function() 
{ 
    if(document.getElementById('link').style.display == 'none'){ 
     document.getElementById('link').style.display = 'inline'; 
     document.getElementById('entry1').style.display = 'inline'; 
     document.getElementById('entry2').style.display = 'inline'; 
    }else{ 
     document.getElementById('link').style.display = 'none'; 
     document.getElementById('entry1').style.display = 'none';     
     document.getElementById('entry2').style.display = 'none'; 
    } 
}