13

ドロップダウン メニューのリンクをクリックしても機能しない理由について、誰か説明を手伝ってもらえますか? 多分ポインターイベントのためですか？リンクがクリックされた後、または閉じるボタンがクリックされた後に閉じるドロップダウンメニューを作成しようとしています。リンクがクリックされたときに親コンテナーを非表示にするなど、いくつかのクールなものを追加しました。

それを行う多くのオプションがあります：

  1. 使用して:focusいますが、フォーカスが使用されている場合、ドロップダウンは次のホバー ドロップダウンではトリガーされません。

  2. :activeコンテナで使用しpointer-eventsてアクティブなリンクのみを指すようにしますが、ポインターイベントにはバグがあります

  3. を使用し:targetますが、:focus と同じ問題があり、2 番目のフーバーをトリガーしません。

body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
.container:hover .test1:active {
    display: none;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}
<ul class="container">
	 Drop down menu
	<li class="test1">
	<a class="dropdown" href="#">X Close</a>
	<ul class="content">
		 CLOSE THIS CONTENT
		<li class="link"><a href="http://www.google.com">Go to link 1</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
	</ul>

4

10 に答える 10

4

通常は JS を使用してこれを行いますが、CSS にはハックがあります。

最初に、閉じるボタンをラップするidcloseとthis の入力を作成します。label

  <input type="radio" id="close" />
  <li class="test1">
    <label for="close">
      <a class="dropdown" href="#">X Close</a>
    </label>

現在の の代わりにこのスタイルを追加します.test1:active。

.container:hover #close:active + .test1{
  display: none;
}
#close {
  display: none;
}

以下のデモを参照してください。

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
}
.test1 {
  display: none;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
  pointer-events: none;
}
.container:hover .test1 {
  display: inline-block;
}
#close {
  display: none;
}
.container:hover #close:active + .test1 {
  display: none;
}
a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}
<ul class="container">
  Drop down menu
  <input type="radio" id="close" />
  <li class="test1">
    <label for="close">
      <a class="dropdown" href="#">X Close</a>
    </label>
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a>
      </li>
    </ul>
  </li>
</ul>

しかし、上記のコードにはinputa 内に無効な要素がありますul- マークアップを少し編集して のラッパーをもう 1 つ作成できulないようにするため (マークアップの変更により、幅/パディングを少し調整する必要があるかもしれません) - 以下のコードを参照してください。 :

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
}
ul {
  width: 200px;
}
.test1 {
  display: none;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
  pointer-events: none;
}
.container:hover .test1 {
  display: inline-block;
}
#close {
  display: none;
}
.container:hover #close:active + ul > li.test1 {
  display: none;
}
a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}
<div class="container">
  Drop down menu
  <input type="radio" id="close" />
  <ul>
    <li class="test1">
      <label for="close">
        <a class="dropdown" href="#">X Close</a>
      </label>
      <ul class="content">
        CLOSE THIS CONTENT
        <li class="link"><a href="http://www.google.com">Go to link 1</a>
        </li>
        <li class="link"><a href="https://www.google.co.uk">Go to link 2</a>
        </li>
        <li class="link"><a href="https://www.google.co.uk">Go to link 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

于 2016-12-14T10:17:11.250 に答える
4

クイックチェック：動作中のJSFiddle

ドロップダウン メニューのリンクをクリックしても機能しない理由について、誰か説明を手伝ってもらえますか? 多分ポインターイベントのためですか？

この動作の理由についての説明: はい、その通りです. セレクタ ロジックの使用方法が原因です.:active詳細を説明するには、この CSS ルールを検討してください

.container:hover .test1:active {
    display: none;
}

メインの下にメニューリンクli.test1があり、内部リンクをクリックすると、この要素までバブルアップされるため、li. したがって、マウスが押されるとすぐに (マウス ダウン イベント)、イベントがトリガーされ、 (ie :active:) が非表示になりますが、クリック イベントは、マウスがダウンとアップの両方の場合にのみ完了します。そのため、は非表示になり、はリンク上になくなりました。ご覧のとおり、クリック イベントがトリガーされる可能性はありません。これが問題です。linksli.test1limouse up

I saw other answers which you seem to be interested in and this really doesn't need any kind of hack, It can be done by just formatting your HTML and with some CSS changes.

解決策:内部メニュー リンクを 内にラップするのではなく、2 つの異なるli.test1を使用できます。1 つは 用、もう 1 つはを保持するためです。これを配置すると、がアクティブなとき(つまり、マウスが押されているとき) にいつでもそれを非表示にすることができ、それに隣接する他の新しいものも非表示にすることができます。つまり、ユーザーがクリックするとメニューが非表示になり、他のメニュー項目をクリックするとリダイレクトされます。liX CLosemenu linksli.test1liX Close li

したがって、HTML 構造の変更は次のようになります。

<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <li class="MenuLinks">
    <ul class="content">
      <!-- all your links go here-->
    </ul>
  </li>
</ul>

そしてメインのCSSルールは

.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}

以下はSOの作業スニペットです 

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
  list-style-type: none;
}
.test1,
.MenuLinks {  
  display: none;
  border-color: orange;
  border-style: dashed;
  background: green;
  pointer-events: none;
}
.test1 {
  padding: 10px;
  border-width: 1px 1px 0px 1px;
}
.MenuLinks {
  border-width: 0px 1px 1px 1px;
}
.container:hover li {
  display: block;
}

/*Rule to hide both test1 and MenuLinks when X Close is clicked*/
.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}


a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}
<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <!--seperate li for close-->

  <li class="MenuLinks">
    <!--wrap all your menu items here-->
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a>
      </li>
    </ul>
    <li>
</ul>

注:リンクをクリックしたときに空白の画面が表示されるのは、クロス オリジン ポリシーに関する Google のセキュリティ制限により、コンソールでこのエラーが発生するためです。

Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=x2VWWLL2Ae-K8Qfwx4ngDQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

ただし、リンクをクリックすると、ネットワーク タブにリクエストが表示されます。

お役に立てれば！！

于 2016-12-18T10:10:56.143 に答える
1

削除することをお勧めします

.container:hover .test1:active {
    display: none;
}

「X 閉じる」リンクをクリックしたときにパネルを閉じる別の方法 (javascript の数行で十分です) を見つけます。(ちなみに、いくつかの html 欠落タグも修正されました)。リンクが機能するようになりました。

body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}
<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
    </ul>
  </li>
</ul>

于 2016-12-09T14:26:40.137 に答える
1

:hoverドロップダウン メニューを開いたままにしておくための -class がマウス ダウンで消えるため、動作していないようです。ドロップダウンがすでに閉じられているため、マウスアップイベントはリンク上で実行されないため、クリックは実行されません。ドロップダウン メニューの開閉には JavaScript を使用する必要があります。

于 2016-12-09T14:15:47.710 に答える
0

なぜ"pointer-events: none;"list-element .test1 に追加したのですか? これによりpointer-events: auto;、クリックイベントがバインドされるため、削除してみてください。

于 2016-12-09T14:14:50.943 に答える
0 
.container:hover .test1:active {
display: none;
}

これを次のように変更します

.container:hover .test1:focus{
    display: none;
    }

ここで起こっていることは、div がリンク クリックから「アクティブな」疑似コードを取得しているときに、DOM がリンクにバブルしてリダイレクトを与える前に隠れていることです。フォーカスに変更すると、クリックが実際に通過する可能性がありますか?

于 2016-12-16T19:54:03.980 に答える
0

jQueryリンクが押されたときにのみコンテナを閉じる処理を試して使用することをお勧めします。pointer-events多くの問題を抱えています。このため、彼らはこの機能を CSS4 に延期することを決定しました。

また、クリックイベントが発生するのを防ぐと思うpointer-events: none;ので、リンクのためだけにjQueryを使用しても機能しません。コンテナの開閉はjQueryで直さなければならないと思います。

于 2016-12-14T08:51:01.193 に答える
0

labelCSS では、要素を にバインドできますinputs。これにより、閉じるボタンを入力にバインドして、アクティブなときにリストを再び非表示にすることができます。

body{
  padding: 20px;
}

a, label{
  text-decoration: none;
  cursor: pointer;
  color: lime;
  font-weight: bold;
}

.container{
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
}

.dropdown{
  display: none;
  border: 1px solid orange;
  background: green;
  margin-top: 10px;
  padding: 10px;
}

#close, #close:active + .dropdown{
  display: none;
}

.container:hover .dropdown{
  display: block;
}

.dropdown > ul{
  padding: 0;
  list-style: none;
}
<div class="container">
  Drop down menu
  <button id="close"></button>
  <div class="dropdown">
    <label for="close">X Close</label>
    <ul>
      <li class="link"><a href="http://www.google.com">Go to link 1</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
    </ul>
  </div>
</div>

inputwithはリストの前に挿入され、id="close"with というラベルによってトリガーされます。トリガーされるとfor="close"
、次のルールが有効になります。

#close, #close:active + .dropdown{
  display: none;
}

リストを非表示にします。
ただし、 にカーソルを合わせると、.container再び表示され、プロセスを繰り返すことができます。ここでは不要な JavaScript は必要ありません。入力で十分です。

また、コードにいくつか問題がありました。あなたはテキストDrop down menuをのCLOSE THIS CONTENT中に直接持っていましたulが、これはできません。an にulは のみを含めることができli、それ以外には何も含めることができません。

お役に立てれば

于 2016-12-16T00:08:43.957 に答える
0

オプションの 1 つは、 を使用することanimateですopacity。visibility:hiddenorを使用overflow:hiddenすると、コードが強化されます。





    body {
        padding: 20px;
    }
    .container {
        border: 1px solid lime;
        padding: 10px;
        width: 200px;
    }
    .test1 {
        display: none;
        border: 1px dashed orange;
        background: green;
        padding: 10px;
        pointer-events: none;
    }
    .container:hover .test1 {
        display: inline-block;
    }
    
    a {
        pointer-events: auto;
        color: lime;
        font-weight: bold;
    }


.container .test1 {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 2s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 2s;
  position: relative;
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;

  }

@keyframes seconds {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;

  }
}


    <ul class="container">
    	 Drop down menu
    	<li class="test1">
    	<a class="dropdown" href="#">X Close</a>
    	<ul class="content">
    		 CLOSE THIS CONTENT
    		<li class="link"><a href="http://www.google.com">Go to link 1</a></li>
    		<li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
    		<li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
    	</ul>
于 2016-12-19T14:04:50.787 に答える