Не удается удалить синее свечение из мобильного складного jQuery

У меня много проблем с тем, чтобы складной jQuery для мобильных устройств не отображал тень синего свечения при нажатии. Учитывая некоторый HTML, например:

<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button id="a1">Go</button></div><br><br>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button id="a2">Go</button></div><br><br>
<br>

... some other answers I found seemed to suggest that the following CSS would help, but no dice:

.collapsibles {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

Также пытался применить этот CSS к h1, применить его встроенно и кое-что еще - пока безуспешно.

JSFiddle демонстрирует проблему: https://jsfiddle.net/pseudobison/xd6oejzz/2/


jquery css jquery-mobile jquery-mobile-collapsible
person Gabriel    schedule 18.02.2018    source источник
comment
Приведите рабочий пример. Ни один из этих фрагментов не показывает нам вашу проблему.   -  person Pedram    schedule 18.02.2018
comment
Спасибо @Pedram, я только что добавил сюда рабочий пример: jsfiddle.net/pseudobison/xd6oejzz/2   -  person Gabriel    schedule 18.02.2018

Ответы (2)


arrow_upward
0
arrow_downward

Пожалуйста, измените DOM selector, который применит эти изменения:

/* This will removed the blue outline once expanded */
.collapsibles h1 a.ui-collapsible-heading-toggle {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

Вот пример скрипта JS: https://jsfiddle.net/wvta0ezL/4/

Надеюсь, это поможет в вашем случае.

person User 328 6227    schedule 18.02.2018
comment
Великолепно, получилось. Спасибо! - person Gabriel; 18.02.2018
comment
Не работает в JQuery Mobile 1.45... Я использовал .ui-collapsible-heading-toggle вместо .collapsibles h1 a.ui-collapsible-heading-toggle, и он работает (снова) - person Jonny; 14.10.2018

arrow_upward
1
arrow_downward

Класс JQM для переопределения — .ui-btn:focus.

Если вы хотите избежать синего ореола только для кнопки сворачиваемого заголовка, используйте:

.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

Вы также можете удалить синий ореол со всех интерактивных виджетов внутри складного объекта, переопределив

.ui-collapsible .ui-btn:focus

ДЕМО:

.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.ui-collapsible .ui-btn:focus {
  /*
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  */
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div role="main" class="ui-content">
        <div class="row collapsibles" data-role="collapsible">
          <h1>Supercategory A</h1>
          <div class="col-xs-7 txt">A1</div>
          <div class="col-xs-5"><button id="a1">Go</button></div><br><br>
          <div class="col-xs-7 txt">A2</div>
          <div class="col-xs-5"><button id="a2">Go</button></div><br><br>
          <br>
        </div>
      </div>
    </div>
  </body>
</html>

person deblocker    schedule 15.03.2018