Akkordeonmenü mit übergeordnetem Link, der sich auch auf irgendeinen Inhalt bezieht

Question

Ich bin neu bei jQuery und es sieht so aus, als ob ich deine Hilfe brauche, nachdem ich nichts von Google bekommen kann. Ich habe ein normales Akkordeonmenü mit Menüs (Level-1) und Untermenüs (Level-2). In den meisten Fällen verweisen nur die Level-2-Links auf eine href-Verbindung und die Level-1 ist wie eine Kopfzeile, aber in einigen Fällen benötige ich die level-1-Verknüpfung, um beispielsweise HTML-Inhalte abrufen zu können. Wenn Sie also auf das übergeordnete Menü klicken, wird der HTML-Inhalt abgerufen und gleichzeitig das Untermenü angezeigt.

Unten ist mein Code. Wenn ich auf den Level-1-Link klicke, wird in der Adresszeile das # -Zeichen angezeigt, weil in der zweiten Zeile meines Codes der href-Wert als # -Zeichen angegeben ist. Wenn ich den Wert entferne, geht es auf die gewünschte Seite und zeigt das umgeschaltete Menü (Level-2) an, aber Level-2-Menü verschwindet schnell. Jede Hilfe wird geschätzt. Danke im Voraus.

$(document).ready(function() { 


var submenu = $(location).attr('href').substring(url.lastIndexOf('/'), url.length); 

var LinkObj = $('a[href*="' + submenu + '"]').parent(); 
$('.mainmenunav').find(LinkObj).parent().show(); 


    SelLink = $('.mainmenunav').find(LinkObj).parent(); 


      $('.level-1 > li > a').click(function(){ 

       if (SelLink != null && SelLink.html() != $(this).next().html()){ 
        SelLink.slideToggle(800); 
       } 

       $(this).next().slideToggle(400); 

       if (SelLink != null && SelLink.html() == $(this).next().html()){ 
        SelLink = null; 
       }else{ 
        SelLink = $(this).next(); 
       } 
      }); 

    }); 

Die HTML-Ansicht:

<ul id="mainmenunav"> 
    <li>Sport 
     <ul> 
      <li><a href="#">Football</a></li> 
      <li><a href="#">Tennis</a></li> 
     </ul> 
    </li> 
    <li><a href="#">News</a> 
     <ul> 
      <li><a href="#">Africa</a></li> 
      <li><a href="#">Asia</a></li> 
     </ul> 
    </li> 
</ul> 

Wenn ich den Level-1-Link klicken, um die Adressleiste es das Zeichen # zeigt, die da in der zweiten Zeile von meinem Code ist ich die href haben Wert als # -Zeichen zugewiesen. Wenn ich den Wert entferne, geht es auf die gewünschte Seite und zeigt das umgeschaltete Menü (Level-2) an, aber Level-2-Menü verschwindet schnell. Versteh den Grund nicht.

Answer 1

Problem gelöst. Eigentlich macht Liferay selbst die Hälfte der Arbeit; es braucht nur einige Verbesserungen und einige jQuery wie in meinem ersten Post für das Umschalten und Deaktivieren einiger der Links.

Answer 2

Können wir Ihr HTML-Markup auch sehen? Oder eine Probe von?

Ich hätte gedacht, dass Sie in der Lage sein sollten, das href Attribut auf diesen Links zu behalten und sie würden immer noch wie erwartet funktionieren (es sei denn, Sie rufen preventDefault() in Ihrem jQuery).

Sie könnten versuchen, so etwas wie:

$('.level-1').click(function(){ 

    // Toggle up and down the menu on click 

    if ($(this).attr('href').length > -1) { 
     // The target has a href attribute and it's longer than nothing 
     location.href=$(this).attr('href'); 
    } elseif ($(this).attr('class') != 'active'){ 
     level-2.slideUp('normal'); 
     $(this).next().stop(true,true).slideToggle('normal'); 
     level-1.removeClass('active'); 
     $(this).addClass('active'); 
    } 
}); 

Der Code ist aus der Spitze von meinem Kopf, so müssen möglicherweise ein wenig gezwickt werden.

Also wird das href Attribut nehmen und das verwenden, um den Browser umzuleiten. Ich habe es auf diese Weise gemacht, da Sie ein Click-Ereignis verwenden, um den Akkordeon zu erweitern - also nehme ich an, dass die mit Links keine untergeordneten Elemente haben werden?

Das "Übliche" ist die Verwendung eines Mouseover-Ereignisses für Untermenüs, und dann können die Klickereignisse au naturale sein.

---

Edit: Von Ihren Kommentaren, ich glaube, es ist am besten den Namen der Seite mit dem href und Aktion den Klick „von Hand“ zu überprüfen, so dass zusätzlich zu der oben genannten, Verwendung:

$(document).ready(function() { 
    // This code fire once the page has loaded 
    if(location.pathname != "/") 
    { 
     // Should select the link which has the same href as the current page 
     $("a[href*=" + location.pathname + "]").addClass('active'); 

    } 
}); 

Sie Vielleicht muss ich dem Code etwas mehr Funktionalität hinzufügen, da ich mit dem betreffenden Thema nicht vertraut bin. Das Konzept ist jedoch, dass die neue Seite einmal geladen wurde (denken Sie daran, dass HTTP keinen Speicher hat, also nicht weiß, was es ist) Zustand war auf der letzten Seite), überprüfen wir die Seitenadresse und passen sie an ein href Attribut an, dann führen Sie das Dropdown wie erforderlich aus.

Answer 3

@RemarkLima Ich habe etwas Ähnliches wie oben beschrieben, wie Sie unten sehen.

$(document).ready(function() { 

$('.level-1 > li > a').attr('href','#'); 

var submenu = $(location).attr('href').substring(url.lastIndexOf('/'), url.length); 

var LinkObj = $('a[href*="' + submenu + '"]').parent(); 
$('.mainmenunav').find(LinkObj).parent().show(); 


    SelLink = $('.mainmenunav').find(LinkObj).parent(); 


      $('.level-1 > li > a').click(function(){ 

       if ($(this).attr('href').length > -1) { 
         location.href=$(this).attr('href'); 

       } else if(SelLink != null && SelLink.html() != $(this).next().html()){ 
        SelLink.slideToggle(800); 
       } 

       $(this).next().slideToggle(400); 

       if (SelLink != null && SelLink.html() == $(this).next().html()){ 
        SelLink = null; 
       }else{ 
        SelLink = $(this).next(); 
       } 
      }); 

    }); 

Wenn ich den Level-1-Link klicken, um die Adressleiste es das Zeichen # zeigt, die da in der zweiten Zeile von meinem Code ist habe ich das als Zeichen # zugewiesen href Wert.Wenn ich den Wert entferne, geht es auf die gewünschte Seite und zeigt das umgeschaltete Menü (Level-2) an, aber Level-2-Menü verschwindet schnell. Versteh den Grund nicht.