Avatar billede syswatch Novice
08. august 2011 - 11:56 Der er 13 kommentarer og
1 løsning

jQuery toogle omskrivning til at styre flere

Hejsa,
Jeg anvender følgende jquery script, og vil gerne have mere en 1 div boks som kan vises/skjules.
Men når man trykker for at få den ene vist, så åbner alle de andre også. Kan man let omskrive scriptet, så det kun er den pågældende der åbner/lukker ???

<script type="text/javascript">
$j(document).ready(function(){
        $j(".slidingDiv").hide();
        $j(".show_hide").show();
    $j('.show_hide').click(function(){
    $j(".slidingDiv").slideToggle();
    return false;
    });
});
</script>
Avatar billede jakobdo Ekspert
08. august 2011 - 12:12 #1
Du kunne jo gøre følgende:
I stedet for at bruge slideToogle(), så bruge $(this).slideToggle();

Og kig evt. også på siblings()
Avatar billede syswatch Novice
08. august 2011 - 14:02 #2
jakobdo,

Skal:
$j(".slidingDiv").slideToggle();
ændres til:
$j(".slidingDiv").$j(this).slideToggle();

Jeg er ikke ret god til javascript.
Avatar billede jakobdo Ekspert
08. august 2011 - 14:07 #3
Kommer lidt an på hvilken effekt du præcist ønsker.
Er det en menu?
Så når man åbner en div, så skal alle andre lukke eller?
Avatar billede syswatch Novice
08. august 2011 - 14:11 #4
Ja, det er en menu jeg er ved at sætte sammen, så hvis de andre kan lukke, så vil det være helt perfekt.
Avatar billede jakobdo Ekspert
08. august 2011 - 14:28 #5
Prøv at se her: http://jsfiddle.net/nnCKN/
Avatar billede syswatch Novice
08. august 2011 - 14:56 #6
Det var ikke lige helt det jeg manglede :-)

Nu får du lige hele smøren:

<script language="JavaScript" type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
</script>

<script type="text/javascript">
$j(document).ready(function(){
       
        $('.slidingDiv').click(function(){
        $("th",$(this)).slideToggle();
        $(this).siblings().children("th").slideUp();
       
        return false;
        });
        });
</script>

#HTML
<table border="0">
<tr>
<td width="45"><img src="img/Star.png" border="0" alt="" /></td>
<td><b><a href="#" class="show_hide">menu 1</a></b></td>                           
</tr>
<tr>
<th colspan="2">
<div class="slidingDiv">
INDHOLD
</div>
</th>
</tr>
<tr>
<td width="45"><img src="img/Star.png" border="0" alt="" /></td>
<td><b><a href="#" class="show_hide">Menu 2</a></b></td>                           
</tr>
<tr>
<th colspan="2">
<div class="slidingDiv">
INDHOLD
</div>
</th>
</tr>
</table>



#CSS
.slidingDiv {
    color: #ffffff;
    width:240px;
    height:75px;
    background-color: #2b3943;
    padding-bottom:20px;
    margin-top:10px;
    display: none;
}


.show_hide {
    display:none;
}
Avatar billede jakobdo Ekspert
08. august 2011 - 15:08 #7
kan du ikke smide den totale kode.
For min kode viser jo netop at det virke.
og ellers må du forklare dig igen, så jeg forstår hvad du vil.
Avatar billede syswatch Novice
09. august 2011 - 09:04 #8
Hej jakobdo,
Det er lidt besværligt at smide den komplette kode, men jeg brugte nogle timer i går aftes med at rode med det, og fandt frem til denne løsning som virker. Om den er helt korrekt skrevet ved jeg ikke, da den er flæsket sammen af flere eksempler :-)

####JavaScript#####
<script type="text/javascript">   
 
    $j(".slidingDiv").hide();
    $j(".show_hide").show();
    $j('.show_hide').click(function(){
    var divname= this.name;
    $j("#"+divname).slideToggle();
    return false;
    });
 
 
  });
</script>

#### CSS ####
.slidingDiv {
    color: #ffffff;
    width:240px;
    background-color: #2b3943;
    padding-bottom:20px;
    margin-top:10px;
    display: none;
}

.show_hide {
    display:none;
}

#### HTML ####

<a href="#" name="div1" class="show_hide">Link 1</a>
<div id="div1" class="slidingDiv" style="height:75px;">

<a href="#" name="div2" class="show_hide">Link 2</a>
<div id="div2" class="slidingDiv" style="height:150px;">

<a href="#" name="div3" class="show_hide">Link 3</a>
<div id="div3" class="slidingDiv" style="height:100px;">

Dette virker, men dog ikke så hvis du klikker på et nyt link, så lukker alle andre de er åbne, men det kan jeg leve med. Men hvis du lige hurtigt har et fix er det velkommen.

Smider du et svar så vi kan lukke... ? Du hjalp trods alt mig i den rigtige retning :-)
Avatar billede jakobdo Ekspert
09. august 2011 - 09:59 #9
Du får et svar.

Og prøv her: http://jsfiddle.net/Zcfuj/
Avatar billede syswatch Novice
09. august 2011 - 10:17 #10
jakobdo,
Tak for eksemplet som er lige som jeg havde tænkt mig...
Det virker bare ikke på min side, og det fatter jeg ikke en skid af... MEN, kan det have noget at gøre med at jeg ændre jQuery kaldet her:

<script language="JavaScript" type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
</script>

Dette gør jeg for at det ikke skal konflikte med prototype.

Ellers er jeg blank... Har kopieret dit eksempel ind, så alt burde være som det skulle være.
Avatar billede syswatch Novice
09. august 2011 - 10:19 #11
Jeg har selvfølgelig husket at sætte j foran $:

    $j(".show_hide").show();
    $j('.show_hide').click(function(event){
    event.preventDefault();
    $j(this).next().siblings(".slidingDiv").slideUp();
    $j(this).next().slideToggle();
Avatar billede jakobdo Ekspert
09. august 2011 - 10:21 #12
Er jo svært at sige.
Men det skal jo virke på den ene eller anden måde.
Avatar billede syswatch Novice
09. august 2011 - 10:33 #13
Har sendt dig en mail via din hjemmeside, med login info til mit projekt, så kan du se alt kode, og kan se hvad der sker, hvis du har lyst til at hjælpe mig i mål :-)
Avatar billede jakobdo Ekspert
16. august 2013 - 13:58 #14
Takker for point.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester