Lars Madsen wrote:
> Martin wrote:
>> Lars Madsen wrote:
>>> Martin wrote:
>>>> Lars Madsen wrote:
>>>>> Martin wrote:
>>>>>> Jesper F wrote:
>>>>>>> Jeg vil gerne vise eller skjule en række DIVs på en side med et
>>>>>>> enkelt klik.
>>>>>>>
>>>>>>> Jeg har noget i stil med
>>>>>>>
>>>>>>> <DIV class="foo"></DIV>
>>>>>>> <DIV class="foo"></DIV>
>>>>>>> <DIV class="foo"></DIV>
>>>>>>> (for jeg må jo ikke bruge <DIV id="foo"></DIV> når der er flere).
>>>>>>>
>>>>>>> Kan jeg med et enkelt klik vise eller skjule alle DIVs med
>>>>>>> class=foo ?
>>>>>>
>>>>>> $('div.foo').click(function() {
>>>>>> $(this).css('display','none');
>>>>>> })
>>>>>>
>>>>>> Kræver dog jQuery
>>>>>> <
http://jquery.com>
>>>>>
>>>>> endnu nemmere burde være
>>>>>
>>>>> $('div.foo').click(function() {
>>>>> $(this).toggle();
>>>>> });
>>>>>
>>>>> så kommer den tilbage når man i gen trykker på knappen.
>>>>
>>>> Nå ja... læste sådan set kun skjule hehe :)
>>>> Men dog så er DIV'en helt væk - så faktisk skal HTML'en se således ud
>>>>
>>>> <div class="foo">
>>>> <div>Tekst her</div>
>>>> </div>
>>>>
>>>> $('div.foo').next().click(function() {
>>>> $(this).toggle();
>>>> });
>>>>
>>>> Så vil <div class="foo"> altid være synlig, men teksten er væk -
>>>> ellers så vil man aldrig kunne trykke på div.foo igen :)
>>>>
>>>
>>> Meningen var jo ikke at trykke på div.foo (sådan forstod jeg det i
>>> hvertfald ikke). toggle hide'er, den sletter ikke, så den er der
>>> stadigvæk. Det ville dog være et problem hvis knappen var inden i
>>> div.foo
>>
>> Lige meget om pilen eller andet er inde i div'en, så fortæller du jo
>> netop at den skal hide "this" som i dette tilfælde er div.foo :)
>>
>> $('div.foo').click(function() {
>> $(this).toggle();
>> });
>>
>> Så her vil toggle aldrig kunne benyttes, eller jo - men man vil aldrig
>> kunne se div.foo igen :)
>>
>
> ahh, ja naturligvis
>
> knappen skal vel så bare have
>
> $(this).click(function() {
> $('div.foo').toogle();
> });
>
> i stedet (utestet)
>
Hvis HTML'en ser således ud
<div class="foo">
<div>Tekst her</div>
</div>
og man bruger
$('div.foo').next().click(function() {
$(this).toggle();
})
Så er "Tekst her" div'en clickable
Hvis man bruger
$('div.foo').click(function() {
$(this).next().toggle();
})
Så er foo div'en clickable, hvis man skulle have problemer med at se
hvad det er der er clickable, så kan med fordel indsætte noget css.
$('div.foo').css('border','1px solid blue').click(function() {
$(this).next().css('border','1px solid green').toggle();
})