jQuery open/dicht ul element

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ferdi R

Ferdi R

26/04/2015 21:15:06
Quote Anchor link
Ik had het voor elkaar en op één of ander manier krijg ik het niet meer aan de praat.

Als je op de ID #OPM klikt dan wordt er een var aangemaakt van de target zodat je weet welke class geopend moet worden, als er een ID met #CFM openstaat wordt die eerst gesloten en dan wordt de juiste class geopend.



Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    $(function(){
        $('#OFM').click(function(){
            
            // Class die ik wil openen
            var class = '.'+$(this).attr('target');
            
            // Eerst alles met ID CFM sluiten
            $('#CFM').slideUp().delay(500);
            
            // De aangeklikte class openen
            $(class).slideToggle();
        });
    });
    </script>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<li><a id="OFM" target="navi">Open/Dicht</a></li>

<ul class="navi" id="CFM"><li>Links</li></ul>

<li><a id="OFM" target="provincie">Open/Dicht</a></li>

<ul class="provincie" id="CFM"><li>Links</li></ul>
Gewijzigd op 26/04/2015 21:22:45 door Ferdi R
 
PHP hulp

PHP hulp

29/03/2024 13:42:36
 
Wouter J

Wouter J

26/04/2015 21:24:55
Quote Anchor link
Een ID kan maar 1 maal per pagina voorkomen. In jouw geval komen op zijn minst 2 IDs 2 keer voor.
Gewijzigd op 26/04/2015 21:25:12 door Wouter J
 
Ferdi R

Ferdi R

26/04/2015 22:00:25
Quote Anchor link
Dat lost niets op, heb het veranderd naar een class.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    $(function(){
        $('.OFM').click(function(){
            
            // Class die ik wil openen
            var class = '.'+$(this).attr('target');
            
            // Eerst alles met ID CFM sluiten
            $('.CFM').slideUp().delay(500);
            
            // De aangeklikte class openen
            $(class).slideToggle();
        });
    });
    </script>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<li><a class="OFM" target="navi">Open/Dicht</a></li>

<ul class="navi CFM"><li>Links</li></ul>

<li><a class="OFM" target="provincie">Open/Dicht</a></li>

<ul class="provincie CFM"><li>Links</li></ul>
 
Wouter J

Wouter J

26/04/2015 22:03:22
Quote Anchor link
Welke error krijg je in je JavaScript console? (F12 of Ctrl + Shift + J)
 
Ferdi R

Ferdi R

26/04/2015 22:15:50
Quote Anchor link
Uncaught SyntaxError: Unexpected token class


Foutmelding is weg, het klapt nu weer open en dicht.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <script type="text/javascript">
    $(function(){
        $('.OFM').click(function(){

            var target = '.' + $(this).attr('target');
            
            //$('.CFM').slideUp();
            

            if($('.CFM').is(':visible'))
            {
                $('.CFM').slideUp('slow');
                //return false;
            }

            if($(target).is(':visible'))
            {
                $(target).slideUp('slow');
                return false;
            }
            else
            {
                $(target).slideDown('slow');
                return false;
            }
        });
    });
    </script>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<li><a class="OFM" target="navi">Open/Dicht</a></li>

<ul class="navi CFM"><li>Links</li></ul>

<li><a class="OFM" target="provincie">Open/Dicht</a></li>

<ul class="provincie CFM"><li>Links</li></ul>


Toevoeging op 26/04/2015 22:50:09:

EDIT:

Thnx Wouter.

Toevoeging op 27/04/2015 11:41:52:

Nu zit ik met het volgende probleem, Ik maak in de CSS gebruik van media queries. Als het scherm te klein wordt dan verander ik het menu (display: none) naar een link die je kan openklappen met jQuery.

Als je het scherm (van mobiel) verticaal hebt en geen gebruik maakt van de link om het menu open te klappen en het scherm kantelt naar horizontaal dan komt het normale menu te voorschijn, maar als je wel gebruik maakt van de link en het scherm dan kantelt komt het menu niet te voorschijn.

Toevoeging op 27/04/2015 16:06:10:

Twee dingen die niet werken.

1 - De 'var content' vult zich op, dus hoe vaker ik klik hoe meer text er in komt te staan. Ik probeer de 'var content' te legen maar dat lukt niet.

2 - Als ik .text() verander naar .html() dan werkt het niet meer. Er wordt geen html opgehaald.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
    $(function(){
        $('.OFM').click(function(){

            //var content = null;
            //delete window.content;
            //content = undefined;
            //delete this.content;
            var content = '';
            
            var target = '.'+$(this).attr('target')+'.CFM';
            var content = $(target).text();
            
            var vullen = '.'+$(this).attr('target')+'.content'+'.CFM';

            if($('.content.CFM').is(':visible'))
            {
                $('.content.CFM').slideUp('slow');
                
            }
            
            if($(vullen).is(':visible'))
            {
                $(vullen).slideUp('slow');
                
            }
            else
            {
                $(vullen).slideDown('slow').text(content);
                return false;
            }
            
        });
    });
    </script>
Gewijzigd op 27/04/2015 11:35:48 door Ferdi R
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.