JQuery показать/скрыть две дивы на клик и скрыть ссылку

Question

Im используя следующий JS

<a href=# onClick="if($(this).next('div').css('display') == 'none') { $(this).next('div').show('fast'); } else { $(this).next('div').hide('fast'); } return false;">Add a Street Address</a> 

и следующий HTML

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

Как бы я модифицировать JS, чтобы показать/скрыть оба эти divs сразу, а затем заставить ссылку исчезнуть?

Answer 1

a. вам лучше использовать класс вместо 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. Скрытие обе дивы может быть сделано как:

$('.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

Идентификаторы должны быть уникальными, поэтому я изменил идентификаторы на классы. Кроме того, я изменил код от того, рядный, чтобы быть ненавязчивым The 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

Первый дать идентификатор для вашей ссылки тега, как «ссылку», а затем дать вам два погружения двух различных идентификаторов, а затем написать функцию 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'; 
    } 
}