13

デフォルトのオプションのリストがあり、展開していくつかの追加オプションを表示できるフォームを作成しようとしています。これは、次の CSS コードで行います。

.myForm .moreOpts {display:none;}
.myForm #more:checked +*+ .moreOpts {display:block;}

次の HTML を使用します。

<form action="#" class="myForm">
  <ul>
    <li>
      <input type="checkbox" id="pref-1" name="pref-1" value="1">
      <label for="pref-1">Foo</label>
    </li>
    <li>
      <input type="checkbox" id="pref-2" name="pref-2" value="2">
      <label for="pref-2">Bar</label>
    </li>
    <li>
      <input type="checkbox" id="more" name="more" value="true">
      <label for="more">More options</label>
      <ul class="moreOpts">
        <li>
          <input type="checkbox" id="pref-3" name="pref-3" value="3">
          <label for="pref-3">Baz</label>
        </li>
        <li>
          <input type="checkbox" id="pref-4" name="pref-4" value="3">
          <label for="pref-4">Qux</label>
        </li>
      </ul>
    </li>
  </ul>
</form>

デモ

このコードは、 Android BrowserとDolphinを除くすべてのブラウザーで完全に機能します。この「バグ修正」を追加することを推奨する記事を見つけましたが、それは Dolphin での問題を解決するだけです。

これをデフォルトの Android ブラウザでも機能させる方法はありますか?

4

3 に答える 3

6

details要素の助けを借りてこれを達成できます。Androidはバージョン 4 以降でサポートしています。ただし、IE と Firefox に対処する必要がありますが、幸いなことに、これらのブラウザーは:checked.

これら 2 つをマージします。サポートされていないブラウザでチェックボックス ハックを使用するだけdetailsです。コードで説明されているプロセスは次のとおりです。http://jsfiddle.net/hF6JP/1/

編集:これは最終的な解決策です。概要内にラベルを配置すると、強制的にチェックボックスをオンにしてオプションを切り替えるという問題が解決されます: http://jsfiddle.net/mYdsT/

于 2014-01-30T17:25:05.457 に答える
2

:checked私はすべてのブラウザを信頼するわけではありません。clickイベントをキャプチャして#more、クラスを親に追加するだけです。で簡単jQueryです。このオプションは、Android および IE8 で機能します。

$("#more").on("click", toggleCheckboxes);
var toggleCheckboxes = function(evt){
  var $this = $(this);
  $this.parents("li").toggleClass("show-more-options");
  evt.preventDefault()
}



.myForm .moreOpts {
  display:none;
}
.myForm .show-more-options .moreOpts {
  display:block;
}

:checked残念ながらIE8ではサポートされていません。

https://developer.mozilla.org/en-US/docs/Web/CSS/:チェック済み

于 2014-01-28T07:44:01.970 に答える
1

http://quirksmode.org/css/selectors/mobile.html#t60

:checkedAndroidのどのバージョンでも動作しないようです。多くの Web ページで (どうやら 2.1 以降) 動作するはずだと報告されている理由はわかりませんが、これは誤りです。

QuirksMode の良いところは、Web に公開する前に、すべての機能が実際のブラウザーで実際にテストされることです。

JavaScript が最適なソリューションのようです。ユーザーが「詳細」ボックスをチェックしてから、追加オプションのいくつかを選択し、「詳細」ボックスのチェックを外した場合...追加の選択は引き続き「チェック」され、ユーザーは「送信」ボタンを押します。「その他」ボックスのチェックを外すたびに、これらのボックスのチェックを外す必要があります。これを行う唯一の方法は、javascript を使用することです。

更新: QuirksMode は、:checkedセレクターの欠陥のあるテストを作成しました。

:checked {
    display: inline-block;
    width: 3em;
}

Android では幅が変わらないことに気付くでしょう...しかしこれは、Android がチェックボックスとラジオに幅を適用しないためです (デスクトップ ブラウザーでは適用されます)。

私のAndroid 2.3でも、以下は機能します：

:checked {
    display: inline-block;
    margin: 3em;
}

したがって、他のコメントで述べたように、問題はチェックされたセレクターと隣接する兄弟セレクターの組み合わせにあります。

:checked + .test { /* does not work on android :( */ }
:checked ~ .test { /* does not work on android :( */ }
于 2014-02-04T00:54:00.777 に答える