Come conservare i dettagli dei genitori quando si fa clic sul menu figlio in jquery

Question

Ho un menu progettato usando jQuery nell'apice dell'oracolo. Il menu è così

Parent1
    child1
    child2
parent2
    child3
    child4
parent3
    child5
    child6

Il mio problema è quando clicco su parent1, dovrebbero essere visualizzati solo child1 e child2 ma nel mio caso ogni genitore viene espanso. E l'utente può vedere tutti i bambini. Il che non dovrebbe accadere, gli utenti dovrebbero essere in grado di vedere solo i dettagli sui genitori e sui figli cliccati.

Il mio codice è il seguente.

$(document).ready(function() {
    var msg = false;
    $('.dropdown_menu').click(function() {
        msg = !msg;
        if (msg)
            $(this).parents('.parent_menu').find('.child_menu').slideDown("slow");
        else
            $('.child_menu').hide();
        return false;
    });
});

Answer 1

Sarebbe stato di grande aiuto se tu avessi fornito del codice HTML. Quindi, presumo che tu stia utilizzando questo HTML Mi dispiace vedere il commento in cui hai fornito alcuni.

Questo script dovrebbe funzionare con l'HTML che hai fornito:

$(document).ready(function(){
 // disable links in the menu
 $('#menu a').click(function(){
  return false
 });
 // hide child menus
 $('.child_menu').hide();
 // enable accordian menu
 $('.dropdown_menu').click(function() {
  $(this).parent().find('.child_menu').toggle("slow");
  return false;
 });
});

---

Modifica: ho apportato le seguenti modifiche:

• Ho disabilitato solo i collegamenti dropdown_menu , quindi i collegamenti child_menu ora funzioneranno
• Per chiudere gli altri menu secondari facendo clic su un nuovo genitore, ho aggiunto un " attivo " classe, quindi nascondilo quando fai clic.
• Lo script ora cerca l'hash della finestra per l'ID posizione dal menu figlio per determinare quale menu figlio visualizzare. Non so come stai cambiando i collegamenti del menu figlio (non potrei semplicemente entrare e aggiungere l'id a questo: " f: NO :: P17_LOCATION_ID: 17 "), ma in qualche modo devi aggiungere l'id della posizione (come # 17 ) alla fine del link: http://www.mysite.com/somepage.htm#17 . Lo script prenderà questo URL e troverà l'ID della posizione 17 e aprirà il menu figlio Belgio quando trova l'ID alla fine del href (vedi riferimento jQuery sul selettore che ho usato).
• Modifica n. 2: ho dimenticato di impedire al clic del genitore di nascondere il figlio come richiesto, quindi ora facendo clic su un altro genitore verrà nascosto il figlio.

Utilizzo di questo HTML (fornito in un commento di seguito):

<div id="menu">
 <div class="parent_menu">
  <a class="dropdown_menu" href="f:P17_LOCATION_ID:8">Belgium</a>
  <div class="child_menu">
   <li>
    <a href="f:NO::P17_LOCATION_ID:17">Ch1</a>
   </li>
   <li>
    <a href="f:NO::P17_LOCATION_ID:27">Ch2</a>
   </li>
  </div>
 </div>

 <div class="parent_menu">
  <a class="dropdown_menu" href="f?p=102:17:100173801651673::NO::P17_LOCATION_ID:35">Germany</a>
  <div class="child_menu">
   <li>
    <a href="f?p=102:17::NO::P17_LOCATION_ID:36">Ch3</a>
   </li>
   <li>
    <a href="f?p=102:17:NO::P17_LOCATION_ID:37">Ch4</a>
   </li>
  </div>
 </div>

</div>

Con questo script:

$(document).ready(function(){
 // disable accordion links in the menu
 $('.dropdown_menu a').click(function(){
  return false
 });
 // hide child menus
 $('.child_menu').hide();
 // get current location ID from window hash
 var hid = window.location.hash;
 hid = hid.substring(1,hid.length);
 // find and open child menu that matches the ID
 $('.child_menu a[href$="' + hid + '"]').closest('.child_menu').addClass('active').slideDown("slow");
 // enable accordian menu
 $('.dropdown_menu').click(function() {
  // prevent hiding the child menu if it's already open
  if ($(this).parent().find('.child_menu').hasClass('.active')) return false;
  // find previously active menu and close it and open current one
  $('.active').removeClass('active').slideUp("slow");
  $(this).parent().find('.child_menu').addClass('active').toggle("slow");
  return false;
 });
});

Infine, lo script che hai appena aggiunto nei commenti, non posso farci niente a meno che tu non fornisca anche l'HTML.

Answer 2

Prova:

$(document).ready(
    function(){ 
      var msg = false; 
      $('.child_menu').click(
         function() { 
           msg = !msg; 
           if (msg) 
             //I have only ONE parent. Pick him, and all his children.
             $(this).parent().find('.child_menu').slideDown("slow"); 
           else 
             $('.child_menu').hide(); 
           return false; 
          }
       ); 
     }
);

Answer 3

Cambia semplicemente i genitori nel genitore singolare. Mentre entrambi trovano gli antenati dell'elemento, l'ambito è diverso.

.parent () cerca solo il genitore immediato.

.parents () trova tutti i genitori fino alla base dell'albero DOM.

EDIT1: devo essere stupido, mentre quanto sopra è vero, indichi di fare clic sul GENITORE degli elementi, non sui bambini - ora che ho gli occhiali:

.children () sarebbe il selettore corretto di quello (dal genitore dei figli ovviamente, come hai indicato.

quindi $ (questo) .children (). codice per fare quello che vuoi qui.

cambiamento:

 $(this).parents('.parent_menu').find('.child_menu').slideDown("slow");

Questo selezionerà gli elementi .parent_menu figli dal mio genitore, che dice " tutti gli elementi .parent_menu e tutti .child_menu all'interno di quello.

a

$(this).children().slideDown("slow");

Questo seleziona solo i MIEI (questo) figli immediati. SE ti capita di avere altri figli (altre classi) puoi specificarlo ulteriormente con:

$(this).children('.child_menu').slideDown("slow");

Modifica2: una nota a margine: non è chiaro se la classe su cui hai l'evento .click è applicata a ciascun genitore (parent1, parent2 ecc.) o al genitore di parent1, parent2 ecc. che cambierebbe l'ambito del .click capture capture, presumo che la classe sia applicata a livello parent1, parent2 ecc.