Abrufen eines Elements nach dem Klicken auf

Ich habe eine Liste, die nach dem Klicken auf das Menü angezeigt wird. Es verschwindet jedoch sofort, wenn Sie nicht Ihren Klick gedrückt halten. Wie kann ich es nach dem Klicken erhalten bleiben? Muss ich Javascript benutzen?Abrufen eines Elements nach dem Klicken auf

Wenn ich das Element-Menü: Hover, dann erscheint es, wenn der Mauszeiger über, und es bleibt, aber ich möchte in der Lage sein, das Menü zu klicken und das Untermenü bleibt weiterhin angezeigt, nachdem es geklickt wurde.

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
body{ 
 
\t height:1000px; 
 
\t width:100%; 
 
\t background:#FCF; 
 
} 
 
#first-div{ 
 
\t width:auto; 
 
\t height:auto; 
 
\t background:#9CF; 
 
} 
 
#first-div img:hover{ 
 
\t opacity:0.3; 
 
} 
 

 
#clear{ 
 
\t clear:both; 
 
\t display:block; 
 
\t margin: 50px 0 50px 0; 
 
} 
 

 
#menu{ 
 
\t width:auto; 
 
\t height:auto; 
 
\t background:#0C9; 
 
\t display:inline-block; 
 
} 
 

 
ul.nav-menu{ 
 
\t display:inline; 
 
\t width:auto; 
 
\t height:auto; 
 
\t display:none; 
 
} 
 

 
#menu:active ul.nav-menu{ 
 
\t display:inline; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="ns-3.css"/> 
 
<meta charset="UTF-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 

 
<div id="first-div"> 
 
<img src="http://www.todayifoundout.com/wp-content/uploads/2014/06/african-elephant-bull.jpg" width="300" height="300" alt=""/> 
 
</div> 
 

 
<div id="clear"></div> 
 

 
<nav id="menu"> 
 
Menu 
 
<ul class="nav-menu"> 
 
<li>text 1</li> 
 
<li>text 2</li> 
 
<li>text 3</li> 
 
</ul> 
 
</nav> 
 

 
</body> 
 
</html>

Quelle

2017-03-05 user3760941

können Sie dies überprüfen - https://jsfiddle.net/abhitalks/d3sgpcoy/ – Abhitalks

Verwenden Sie ein :focus und tabindex für Menü.

@charset "UTF-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    height: 1000px; 
 
    width: 100%; 
 
    background: #FCF; 
 
} 
 

 
#first-div { 
 
    width: auto; 
 
    height: auto; 
 
    background: #9CF; 
 
} 
 

 
#first-div img:hover { 
 
    opacity: 0.3; 
 
} 
 

 
#clear { 
 
    clear: both; 
 
    display: block; 
 
    margin: 50px 0 50px 0; 
 
} 
 

 
#menu { 
 
    width: auto; 
 
    height: auto; 
 
    background: #0C9; 
 
    display: inline-block; 
 
} 
 

 
ul.nav-menu { 
 
    display: inline; 
 
    width: auto; 
 
    height: auto; 
 
    display: none; 
 
} 
 

 
#menu:focus ul.nav-menu { 
 
    display: inline; 
 
}

<div id="first-div"> 
 
    <img src="http://www.todayifoundout.com/wp-content/uploads/2014/06/african-elephant-bull.jpg" width="300" height="300" alt="" /> 
 
</div> 
 
<div id="clear"></div> 
 
<nav id="menu" tabindex="1"> 
 
    Menu 
 
    <ul class="nav-menu"> 
 
    <li>text 1</li> 
 
    <li>text 2</li> 
 
    <li>text 3</li> 
 
    </ul> 
 
</nav>

Quelle

2017-03-05 14:37:12

wow das ist interessant. Können Sie mir bitte erklären, welcher Tabindex ist und warum er benötigt wird? Ich habe nie davon gehört. und danke dir! – user3760941

und warum gibt es einen blauen Rahmen um ihn herum, nachdem er angeklickt wurde? – user3760941

Tabindex gibt die Blocknummer an, um den Fokus zwischen ihnen zu ändern, indem Sie die Tabulatortaste drücken. Standardmäßig kann das UL-Tag nicht fokussiert werden, tabindex löst dieses Problem. blaue Grenze ist ein Umriss, kann ... –

Sie können mit etwas jquery dies tun. Fügen Sie diese aktive Klasse zu Ihrem CSS hinzu. Entfernen Sie die #menu: aktiv ul.nav-Menüauswahl (ps i auf einem Telefon bin writting)

.active { 
    display:inline; 
}

und dann fügen Sie diese zu einem Script-Tag oder eine Datei.

$('#menu').click(function(){ 
    $('.nav-menu').toggleClass('active'); 
});

Quelle

2017-03-05 14:11:45 Harry

Abrufen eines Elements nach dem Klicken auf

Antwort

Verwandte Themen