Как сделать: проверена работа в Android-браузере?

Я пытаюсь создать форму, которая имеет список параметров по умолчанию, и которая также может расширяться, чтобы показать несколько опций exta. Я делаю это со следующим кодом 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-браузера и Дельфина. Я нашел статью, в которой рекомендуется добавить this "bugfix", но это только исправляет мою проблему в Dolphin.

Есть ли способ сделать эту работу для Android-браузера по умолчанию тоже?

Ответы

Ответ 1

Вы можете достичь этого с помощью элемента details. Android поддерживает его с версии 4. Однако вам придется иметь дело с IE и Firefox, но повезло, что эти браузеры поддерживают псевдо-состояния CSS3, включая :checked.

Два слияния этих двух, просто используйте checkbox hack в браузерах, которые не поддерживают details. Здесь процесс объясняется в коде: http://jsfiddle.net/hF6JP/1/

EDIT: это окончательное решение, помещая метку в сводку, разрешает проблему принудительного checkbox для переключения параметров: http://jsfiddle.net/mYdsT/

Ответ 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/:checked

Ответ 3

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

:checked, по-видимому, не работает ни в одной версии Android. Я не уверен, почему так много веб-страниц сообщают, что они должны работать (по-видимому, с версии 2.1), но это неверно.

Хорошая вещь о QuirksMode заключается в том, что каждая функция фактически протестирована в реальном браузере, прежде чем отправлять ее в Интернете.

JavaScript - лучшее решение. Я бы даже рекомендовал 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 :( */ }