Avatar billede MatsKruger Nybegynder
01. november 2011 - 12:22 Der er 8 kommentarer og
1 løsning

Jquery hasClass then hide

Hej
Jeg skal lave en menu i drupal ved hjælp af jquery
den skal kunne folde sig ud og ind, men når der er et aktivt link med class('active') skal den forblive udviddet

(function ($) {
  $(document).ready(function() {
  $('.region-sidebar-first .block-menu ul.menu').children().children().hasClass('active').hide();
  $('.region-sidebar-first .block-menu h2').click(function() {
    $(this).parent().siblings().children().next().children().slideUp(400);
    $(this).next('.content').children('.menu').slideDown(400);
  });
  });
}(jQuery));
Avatar billede jokkejensen Novice
01. november 2011 - 13:31 #1
Har du ikke noget markup, eller skal man gætte sig til det ?

og gerne et link så man kan se hvad det er du forsøger.

/J
Avatar billede MatsKruger Nybegynder
01. november 2011 - 13:38 #2
Nu er det jo drupal tema så det er ikke helt min markup så ved ikke lige hvordan jeg skal sende markup til dig.
ved ikke om du kan bruge dette.
http://oi42.tinypic.com/15of4hy.jpg
Avatar billede jokkejensen Novice
01. november 2011 - 13:43 #3
jo det er fint, så dem med et a med klassen active skal ikke rulle frem og tilbage ?
Avatar billede kalp Novice
01. november 2011 - 14:10 #4
ved ikke om jeg har forstået det du vil have.. men det her?

og ellers.. kan du ikke paste din html fra din div med id "main" herind.. er for doven til at lave test html:)

(function ($) {
  $(document).ready(function() {
  $('.region-sidebar-first .block-menu ul.menu').children().children().hasClass('active').hide();
  $('.region-sidebar-first .block-menu h2').click(function() {
    if($(this).parent().find('a.active').length > 0) return;
    $(this).parent().siblings().children().next().children().slideUp(400);
    $(this).next('.content').children('.menu').slideDown(400);
  });
  });
}(jQuery));
Avatar billede kalp Novice
01. november 2011 - 14:13 #5
mit eksempel er faktisk lidt forkert.. tjekket jeg har indført er vidst rigtigt nok hvis jeg forstod det du ville have, men jeg mangler at løbe siblings igennem.
Avatar billede MatsKruger Nybegynder
01. november 2011 - 14:15 #6
Ja det er lige præcis det.
Håber virkeligt i kan hjælpe har siddet 6 timer med det nu og kan bare ikke få det til at virke.
Avatar billede kalp Novice
01. november 2011 - 14:42 #7
Altså.. det at du kalder siblings forvirrer mig.. er det meningen kaldet skal påvirke alle divs med class "menu" ?

anyway.. her er et forslag:

<html>
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.block-menu h2').click(function() {
        if($(this).parent().find('a.active').length > 0) return;
        $(this).parent().find('.menu').slideUp(400);
        $(this).parent().find('.menu').slideDown(400);
  });   
});
</script>   
</head>
<body> 
  <div>
        <div class='block-menu'>
          <h2>Menu 1</h2>
          <div class='content'>
            <ul class='menu'>
                <li>
                    <a href="#" class="active">test 1</a>
                </li>
            </ul>
          </div>
        </div>
        <div class='block-menu'>
          <h2>Menu 2</h2>
          <div class='content'>
            <ul class='menu'>
                <li>
                    <a href="#">test 2</a>
                </li>
            </ul>
          </div>
        </div>
        <div class='block-menu'>
          <h2>Menu 3</h2>
          <div class='content'>
            <ul class='menu'>
                <li>
                    <a href="#">test 3</a>
                </li>
            </ul>
          </div>
        </div>       
  </div>
</body>
</html>
Avatar billede kalp Novice
01. november 2011 - 14:45 #8
hvis de skal påvirke hinanden kan du erstatte javascripten med:

$(document).ready(function(){
  $('.block-menu h2').click(function() {
    $('.block-menu').each(function() {
        if($(this).find('a.active').length > 0) return;
        $(this).find('.menu').slideUp(400);
        $(this).find('.menu').slideDown(400);
    });
  });   
});


og ja jeg benytter "find" men du kan bare rette det tilbage.. det her er bare hurtigere til test..

jeg er som sagt ikke helt med på hvad du vil, men mine kode eksempler gør da noget forskelligt om ikke andet xD måske kan de få dig i den rigtige retning.
Avatar billede MatsKruger Nybegynder
02. november 2011 - 08:33 #9
Fandt selv en løsning
Men mange gange tak for hjælpen alligevel
    (function ($) {
      $(document).ready(function() {
      $('.region-sidebar-first .block-menu ul.menu').hide();
    $('.region-sidebar-first .block-menu ul.menu').find('a.active').parent().parent().show();
  $('.region-sidebar-first .block-menu h2').click(function() {
    $(this).parent().siblings().children().next().children().slideUp(400);
    $(this).next('.content').children('.menu').slideDown(400);
  });
  });
}(jQuery));
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