クリック後に表示する要素を取得する

メニューをクリックした後に表示されるリストがあります。ただし、クリックしない限り、すぐに消えます。クリック後にどうやってそれを維持することができますか？私はJavaScriptを使用する必要がありますか？クリック後に表示する要素を取得する

要素メニューを作成すると：ホバーオーバー時に表示され、それが表示されたままになりますが、そのメニューをクリックできるようにするために、サブメニューはクリックされたままになります。

@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>

出典

2017-03-05 user3760941

あなたはこれをチェックする - https://jsfiddle.net/abhitalks/d3sgpcoy/ – Abhitalks

使用Aメニューは:focusとtabindexです。

@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>

出典

2017-03-05 14:37:12

すごいそれは面白いです。あなたはtabindexが何であるのか、なぜ必要なのかを教えてください。私はそれについて聞いたことがない。そしてありがとう！ – user3760941

とクリックした後に周囲に青い枠線が表示されるのはなぜですか？ – user3760941

tabindexは、タブを押すことによってそれらの間でフォーカスを切り替えるブロック番号を指定します。デフォルトではulタグはフォーカスできませんが、tabindexはこの問題を解決します。青いボーダーはアウトラインです、かもしれない... –

あなたは、いくつかのjQueryを使ってこれを行うことができます。このアクティブなクラスをCSSに追加します。

.active { 
    display:inline; 
}

（PS私は電話で足すよ）アクティブul.navメニューのセレクタと、スクリプトタグやファイルにこれを追加します：。#menuを削除

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

出典

2017-03-05 14:11:45 Harry

クリック後に表示する要素を取得する

答えて

関連する問題