Liste erweitern, wenn Mausklick auf Liste

-5

Ich habe Dropdown-Menü mit Listenelement erstellt. Die Liste wird erweitert, wenn die Maus über den Mauszeiger geht, aber ich muss tun, wenn die Maus auf die Liste klickt, sollte die Liste erweitert werden.Liste erweitern, wenn Mausklick auf Liste

CSS:

.top-level 
{ 
background:#999; 
width:100%; 
line-height: 25px; 
} 
.top-level li 
{ 
border-bottom: #fff solid; 
border-top: #fff solid; 
border-width: 1px;  
} 
.top-level li:hover 
{ 
background: white; 
text-decoration: none; 
} 
.top-level li:hover >ul 
{ 
background: white; 
text-decoration: none; 
display :inline ; 
} 
.second-level 
{    
background:#999; 
width:100%; 
line-height: 25px;  
list-style: none; 
display: none; 
} 
.second-level > li 
{  
display: inline-block;   
border-bottom: #fff solid; 
border-top: #fff solid; 
border-width: 1px; 
background:#999;  
} 
.second-level > li:hover 
{ 
background: #fff; 
text-decoration: none; 
} 
.second-level li:hover >ul 
{ 
background: white; 
text-decoration: none; 
display :inline ; 
}

HTML:

<ul class="top- 
level">                 
    <li> <span>Test - A</span> 
    <ul class="second-level"> 
     <li> <span>Test - A1</span></li> 
     <li> <span>Test - A2</span> 
     <ul class="second-level"> 
      <li> <span>Test - A21</span></li> 
      <li> <span>Test - A21</span></li> 
      <li> <span>Test - A21</span></li> 
      <li> <span>Test - A21</span></li> 
     </ul> 
     </li> 
     <li> <span>Test - A3</span></li> 
     <li> <span>Test - A4</span></li> 
     <li> <span>Test - A5</span></li> 
    </ul> 
    </li> 
    <li> <span>Test - B</span></li> 
    <li> <span>Test - C</span></li> 
    <li> <span>Test - D</span></li> 
</ul>

Oben ist mein Test-Codierung für CSS und HTML. Bitte schauen Sie sich diesen Code an und geben Sie mir die Lösung für das Mausklick-Event.

Quelle

2016-08-27 user2724379

Klicks sind der Bereich von Javascript. Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu programmieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

Sie können jQuery verwenden und ein Klickereignis auf die oberste Ebene li anwenden. Etwas wie:

$('.top-level').on ('click', function(){ 
$('.top-level > li').css ('display', 'block'); 
});

bin ich nicht ganz sicher, was Ihre HTML aussieht, aber das ist die allgemeine Idee. Sie müssen auch eine Funktion zum Schließen des Menüs erstellen. Es gibt viele Ressourcen im Internet für Beispiele und Tutorials zum Schreiben von jQuery.

Quelle

2016-08-27 21:42:21 user1725382

Liste erweitern, wenn Mausklick auf Liste

Antwort

Verwandte Themen