Detaillierte Einführung, wie JS erkennt, dass sich das aktuelle Menü in einem mehrstufigen Menü mit dem Seitensprungstil nicht ändert

In diesem Artikel wird JQuery vorgestellt, um zu erkennen, dass sich das aktuelle Menü in einem mehrstufigen Menü nicht mit dem Seitensprungstil ändert. Interessierte Freunde sollten einen Blick darauf werfen

1. Übersicht

Dieser Artikel stellt die clevere Implementierung des aktuellen Menüs in einem mehrstufigen Menü vor, das sich mit dem Seitensprungstil nicht ändert . Ich scheine nicht zu verstehen, was es bedeutet?

Sehen Sie sich die Bilder an und sprechen Sie: Wenn Sie auf das zweite oder mehrstufige Menü klicken, wird das übergeordnete Menü erweitert und das aktuelle Menü befindet sich im ausgewählten Zustand. Verstehen Sie es jetzt? ?

2. Anwendungsszenarien

Wenn ein Projekt eine öffentliche Vorlagendatei verwendet (wie auf der (links im Bild oben in der Seitenmenüleiste) Wenn wir jedem Untermenü einen Link hinzufügen, wird nach dem Klicken auf den Seitensprung immer noch der Stil der öffentlichen Vorlage verwendet. Zu diesem Zeitpunkt müssen wir den Stil des aktuellen Menüs dynamisch laden .

Drei. Implementierungsmethode

Erste Methode: Übergeben Sie Variablen über PHP, und die Vorlagenseite empfängt diese Variablen Erkennen Sie, ob das Menü der aktuellen Seite ausgewählt ist oder nicht, übergeordnete Erweiterung und andere Stile

Nachteile: Obwohl die Implementierung einfach ist, erfordert jede Seite, dass PHP Variablen übergibt, was sehr umständlich ist. Diese Methode wird nicht empfohlen , also wird es nicht mehr verwendet!

Der zweite Typ: Durch Vergleichen des href-Werts des a-Tags im aktuellen Menü mit dem Wert der Browser-URL bestimmen Sie, ob der href--Attribut--Wert im a-Tag zum gehört Browser-URL-Teil, was bedeutet, dass das Menü mit dem Tag a ausgewählt werden sollte, und dann den Stil dem Menü und dem entsprechenden übergeordneten Menü zuweisen.

4. Geben Sie eine Kastanie

 <ul class="sidebar-menu">
  <li class="header">主菜单</li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-users"></i> <span>用户管理</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;agent&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 代理商</a></li>
   <li><a href="{{ path(&#39;client&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 委托人</a></li>
   <li><a href="{{ path(&#39;cs_staff&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 客服</a></li>
   <li><a href="{{ path(&#39;admin&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 管理员</a></li>
   </ul>
  </li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-bicycle"></i> <span>车辆管理</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;bike&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 单车</a></li>
   </ul>
  </li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-fw fa-cny"></i> <span>统计报表</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;report&#39;)}}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 单车收益</a></li>
   </ul>
  </li>
  </ul>

Hinweis: Der obige Stil ist der Stil des Bootstamps

Wenn es sich bei der aktuellen Seite um eine Administratorseite handelt, fügen Sie das Attribut class="active" zum entsprechenden li hinzu, und der Stil der übergeordneten UL wird durch style="<a href bestimmt ="http:/ /www.php.cn/wiki/927.html" target="_blank">display<code>style="<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: none;": none;"Ändern Sie es als übergeordnetes Element von style="display: block;",ul und fügen Sie das Attribut hinzu class="active", Das ist der Effekt von Abbildung 1.

Das Folgende ist der von mir geschriebene js-Implementierungscode, der in der öffentlichen js-Datei abgelegt werden kann

 var CURRENT_URL = window.location.href.split('?')[0];
 CURRENT_URL_ARR=CURRENT_URL.split("/",6); 
 for (i=0;i<CURRENT_URL_ARR.length ;i++ ){
 TEM_URL = CURRENT_URL_ARR.join(",");
 TEM_URL = TEM_URL.replace(/,/g,"/");
 $(&#39;.sidebar-menu&#39;).find(&#39;a&#39;).filter(function () {
  return this.href ==TEM_URL+"/";
 }).parent(&#39;li&#39;).addClass(&#39;active&#39;).parent(&#39;ul&#39;).css("display","block").parent(&#39;li&#39;).addClass(&#39;active&#39;);
 CURRENT_URL_ARR.pop();
 }

Erklärung:

Zeile 1: Adresse vor der aktuellen URL abrufen?, URL-Parameter entfernen

alert(CURRENT_URL);

und das Ergebnis ist:

http://partner.bike.lc/admin/

Zeile 2: Drücken Sie „ /“, um die URL wieder in String Array aufzuteilen. Um den entsprechenden Controller und die entsprechende Methode genau zu finden, legen Sie

alert(CURRENT_URL_ARR);

fest nach Bedarf. Das Ergebnis ist:

http:,,partner.bike.lc,admin,

Zeile 3:SchleifeMatch-URL

Zeile 4: Konvertieren Sie das Array in einen String

aert(TEM_URL);

Das durch die Schleife erhaltene Ergebnis Die Reihenfolge ist:

http:,,partner.bike.lc,admin,
http:,,partner.bike.lc,admin
http:,,partner.bike.lc
...

Zeile 5: Konvertieren Sie die Zeichenfolge im vorherigen Schritt in die URL-Form

aert(TEM_URL);

Die durch die Schleife erhaltenen Ergebnisse sind :

http://partner.bike.lc/admin/http://partner.bike.lc/adminhttp://partner.bike.lc
...

Zeilen 6–10: Durchlaufen Sie alle a-Tags in der Menüleiste, ermitteln Sie, ob die URL in der Schleife einen href-Wert hat, der dem a-Tag entspricht, und fügen Sie in diesem Fall den erforderlichen Stil

Hinweis:

this.href ruft die vollständige URL-Adresse ab;

pop wird verwendet, um

das letzte Element des Arrays zu löschen ist sehr wichtig. Das ist die JS-Implementierung des mehrstufigen Menüs. Ich weiß nicht, ob Sie die Implementierungsidee verstehen . Der Stil kann an Ihre eigene Situation angepasst werden~

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung, wie JS erkennt, dass sich das aktuelle Menü in einem mehrstufigen Menü mit dem Seitensprungstil nicht ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!