Удаление: зависание на мобильных устройствах - PullRequest
Новая
       9

Удаление: зависание на мобильных устройствах

0 голосов
/ 24 октября 2018

Я ценю, что есть ответы на этот вопрос, но мне еще предстоит найти решение, которое работает для меня.

У меня есть выпадающее меню, в котором стили применяются к :hover, в мобильных видовых экранах это не должноне может быть применимо по понятным причинам.

Раскрывающийся список структурирован примерно так: 

<div className={ styles.dropdownWrapper }>
        <span className={ styles.dropdownLabel }>{ label }</span>
        <object className={ styles.dropdownArrow }></object>
        <div className={ styles.dropdownOptions }>
            <div className={ styles.dropdownItem }>
                <span>Settings</span>
            </div>
            <div className={ styles.dropdownItem }>
                <span onClick={ () => console.log("logout") }>Logout</span>
            </div>
        </div>
    </div>

Со стилем: 

.dropdownWrapper {
  display: flex;
  height: 100%;
  align-items: center;
  cursor: pointer;
}

.dropdownOptions {
  display: none;
}

.dropdownItem {
  padding: 0.4em;
}

.dropdownItem hr {
  border: 0;
  height: 1px;
  background: #979797;
  margin: 0;
}

.dropdownWrapper:hover .dropdownOptions {
  top: 100%;
  display: block;
  position: absolute;
  padding: 1em 1em 0.5em 1em;
  background-color: #36394f;
  border-radius: 2px;
  min-width: 100px;
}

.dropdownArrow {
  padding-left: 0.5em;
  height: 24px;
  width: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: inline("./downArrow.svg");
}

@media only screen and (max-width: 768px) {
  .dropdownOptions {
    display: block;
    position: relative;
  }

  .dropdownArrow, .dropdownHr {
    display: none;
  }
}

Приведенный выше код работает так же, как и в Firefoxнастольный и мобильный, рабочий стол Chrome, но не мобильный.Проблема в том, что onClick() не запускается, потому что :hover кажется сохраненным и вызывает "скрытие" выпадающих элементов.

Ранее я нашел это решение , нотеперь это устарело в настольном компьютере Firefox.

Следующим решением было обновить CSS следующим образом: 

@media (hover: hover) {
  .dropdownWrapper:hover .dropdownOptions {
    top: 100%;
    display: block;
    position: absolute;
    padding: 1em 1em 0.5em 1em;
    background-color: #36394f;
    border-radius: 2px;
    min-width: 100px;
  }
}

. Это устраняет проблему с мобильным Chrome, но не работает в настольном компьютере Firefox.

Любые указатели будут с благодарностью!

Ответы [ 2 ]

0 голосов
/ 24 октября 2018 
@media only screen and (min-width: 769px) { 
 .dropdownWrapper:hover .dropdownOptions {
  top: 100%;
  display: block;
  position: absolute;
  padding: 1em 1em 0.5em 1em;
  background-color: #36394f;
  border-radius: 2px;
  min-width: 100px;
 }
}

Попробуйте добавить этот код:)

0 голосов
/ 24 октября 2018

Вам следует подумать об использовании стратегии «сначала в мобильном».Он заключается в применении правил CSS к мобильным устройствам и их перезаписи (или добавлении некоторых) для больших экранов.

Таким образом, , вы должны определить свои правила CSS для мобильных устройств, затем используйте медиазапрос для таргетинга на большие экраны 

@media only screen and (min-width: 769px) { }
...