Javascript 在Firefox/Edge和Safari上更改项目时，引导手风琴会闪烁

在Windows10上测试

在以下方面效果良好： 铬

但不是关于： 火狐 边缘 狩猎

简化测试用例：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// This section makes the search work.
(function() {
    var searchTerm, panelContainerId; 
    // Create a new contains that is case insensitive
  $.expr[':'].containsCaseInsensitive = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };  
    
    
    $('#accordion_search_bar').on('change keyup paste click', function() {
      //searchTerm = $(this).val();

      searchTerm = $(this).val(); 
      
      var collapse = $(".panel-group");
      if ($(this).val() != "") {

//find panel default hide them
     
     collapse.find(".panel-default").hide();
         $(".panel-group .hiddennote").remove();
          //$(".panel-heading").hide();
      $(".panel-group").append('<div class="hiddennote">Cliquez sur Reset afin de faire apparaitre toutes les rubriques</div>');

//loop through panel group
        $(".panel-group").each(function() {
        //check if matches
        collapse.find('.panel-heading:containsCaseInsensitive(' + searchTerm + '),.panel-collapse:containsCaseInsensitive(' + searchTerm + ')').parent().show().css({
            "border-color": "#ff0000"
          });
          $(".panel-heading").css({ "border-color": "#ff0000" } ) ;
          //console.log('term=' + searchTerm)

        });
      } else {
         
        collapse.find(".panel-default").show().css({
          "border-color": ""
        });
        
        
        //show all and remove red bg 
      }
    });

  }());


  $('#resetbtn').click(function() {
    $('#accordion_search_bar').val("");
    $(".panel-group").find(".panel-default").show().css({
      "border-color": ""
    });//show all remove red bg
    //$(".panel-heading h5").show();
     $(".panel-group .hiddennote").hide();
   $(".panel-heading").css({ "border-color": "" } ) ;

  });
});
</script>


<style>
//colors
//$grey: #cacaca;

// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after { 
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px; 
    margin:20px;
  }  
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title { 
  a {
    display: block;
  }
}
.panel-heading {
    padding: 0px 15px;
}

.panel-default > .panel-heading {
    color: #fff;
    background-color: #15a5df;
    border-color: #bb2727;
    border: none;
}

h5, .h5 {
    color:white;
    margin-bottom:0px;
    margin-top:0px;
    border:#15a5df solid 20px;
}

</style>


<p style="margin-bottom: 0cm; font-style: normal; font-weight: normal; text-align: center;"><span style="font-size:20px;"><span style="color:#FF0000;"><strong>Mise &agrave; jour le 6 novembre 2020</strong></span></span></p><br />

<p style="text-align: center;"><span style="font-size:18px;"><strong>Pleinement engag&eacute;e dans la lutte contre la propagation du coronavirus COVID-19, la Ville de Calais se mobilise.</strong></span><br />
<span style="font-size:12px;">Les services de la collectivit&eacute; se r&eacute;unissent quotidiennement autour du Maire pour apporter les meilleures r&eacute;ponses &agrave; l&rsquo;urgence sanitaire.<br />
La Ville de Calais travaille &eacute;galement avec les services de la Pr&eacute;fecture des Hauts de France et de l&#39;Agence R&eacute;gionale de Sant&eacute; pour prot&eacute;ger les habitants et prendre soin des plus fragiles.</span></p><br />

<p style="text-align: center;"><span class="_2cuy _19ii _2vxa">La situation &eacute;volue quotidiennement.<br />
Restez inform&eacute;s en consultant notre <strong><a href="https://www.calais.fr" rel="noreferrer noopener" target="_blank">page Web</a></strong> et notre <strong><a href="http://www.facebook.com/villedecalaisofficiel" rel="noreferrer noopener" target="_blank">page Facebook</a></strong> qui sont mises &agrave; jour continuellement.</span></p>
<br />

    <h4><strong>Cliquez sur la rubrique souhaitée pour accéder à son contenu :</strong></h4>
<div class="container" id="page_container">

    <div id="accordion_search_bar_container">
        <input type="search" id="accordion_search_bar" placeholder="Rechercher" />
        <input type="button" id="accordion_search" value="Chercher dans la FAQ">
        <input type="button" id="resetbtn" value="Reset">
  </div>

 <!-- SECTION 1 -->
  <h2 id="one">Port du masque, dépistage & prévention</h2>
  <div class="panel-group" id="accordionname1">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionname1" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Port du masque obligatoire <strong><span style="color:#A00606;">(au 05/11/2020)</span></strong></h5>
        </a>
      </div>
      <div id="collapse10" name="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
            <p>Depuis le vendredi 30 octobre, le port du masque grand public est obligatoire <strong>&agrave; partir de 11 ans</strong> en compl&eacute;ment de l&rsquo;application des gestes barri&egrave;res dans les lieux suivants :</p>
            <h2><span style="font-size:20px;"><span style="color:#15a5df;">Arrondissement de Calais</span></span></h2>
            <p>Commune de Calais :</p>
            <ul>
                <li>Totalit&eacute; de l&rsquo;espace public</li>
            </ul>
            <br />
            <p>Commune de Sangatte :</p>

            <ul>
                <li>Digue Gaston Berthe</li>
                <li>Digue de Sangatte</li>
            </ul>
            <br />
            <p><strong>Attention</strong>, la pr&eacute;fecture pr&eacute;cise que si vous souhaitez courir ou faire du v&eacute;lo le port du masque n&#39;est pas une obligation &agrave; condition d&#39;&ecirc;tre seul. Si accompagn&eacute;, le port du masque redevient obligatoire.</p>
        </div>
      </div>
    </div>

    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname1" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> Pour prévenir la propagation du coronavirus COVID-19</h5>
        </a>
      </div>
      <div id="collapse11" name="collapse11" class="panel-collapse collapse ">
        <div class="panel-body postclass">
            <ul>
                <li>Lavez-vous les mains r&eacute;guli&egrave;rement pendant au moins trente secondes avec de l&#39;eau et du savon</li>
                <li>&Eacute;ternuez et toussez dans votre coude</li>
                <li>Jetez chacun de vos mouchoirs apr&egrave;s utilisation</li>
                <li>&Eacute;vitez les poign&eacute;es de mains ou les embrassades (pendant cette p&eacute;riode d&#39;&eacute;pid&eacute;mie)</li>
                <li>Respectez la distance de s&eacute;curit&eacute; d&#39;un m&egrave;tre entre les personnes</li>
            </ul>

            <p style="text-align:center;"><em><span style="color:#FF0000;"><strong>Cliquez sur l&#39;image ci-dessous pour l&#39;agrandir</strong></span></em></p>

            <p><a href="http://www.pas-de-calais.gouv.fr/content/download/47089/283855/file/Infographie_Coronavirus_A4.pdf" rel="noreferrer noopener" target="_blank"><img alt="Coronavirus" class="img-responsive center-block" src="/dam?media-id=5e6bb36572e7e58e046ec757&amp;width=700&amp;height=495" style="width:700px;height:495px;" title="Coronavirus" /></a></p>
        </div>
      </div>
    </div>
    
    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname1" href="#collapse111">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> Recommandations pour les personnes ayant voyagé dans une zone à risque</h5>
        </a>
      </div>
      <div id="collapse111" name="collapse111" class="panel-collapse collapse ">
        <div class="panel-body postclass">
            <p align="JUSTIFY" style="margin-bottom: 0.07cm; font-style: normal; font-weight: normal;margin-bottom: 0.26cm; font-style: normal; font-weight: normal; widows: 2; orphans: 2"><font color="#535454"><font face="Arial, sans-serif"><font size="2" style="font-size: 11pt">Si vous revenez d&rsquo;un voyage en zone &agrave; risque d&rsquo;exposition ou d&#39;un foyer &eacute;pid&eacute;mique fran&ccedil;ais (dit &quot;cluster&quot;), il est conseill&eacute; de surveiller son &eacute;tat de sant&eacute; et de prendre les pr&eacute;cautions suivantes pendant 14 jours.</font></font></font></p>

            <ul>
                <li>Prendre sa temp&eacute;rature 2 fois par jour.</li>
                <li>Se laver les mains plusieurs fois par jour (avec du savon ou une solution hydroalcoolique).</li>
                <li>Surveiller l&rsquo;&eacute;ventuelle apparition de sympt&ocirc;mes d&#39;infection respiratoire.</li>
                <li>Rester chez soi, pr&eacute;venir son employeur et privil&eacute;gier le t&eacute;l&eacute;travail.</li>
                <li>Porter un masque de protection, lors de vos sorties ou vos contacts.</li>
                <li>&Eacute;viter toute sortie non indispensable (cin&eacute;ma, restaurant).</li>
                <li>R&eacute;duire ses contacts sociaux</li>
                <li>&Eacute;viter de fr&eacute;quenter des lieux o&ugrave; se trouvent des personnes fragiles (EHPAD, &eacute;coles, h&ocirc;pitaux).</li>
            </ul>
        </div>
      </div>
    </div>
    
    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname1" href="js#collapse112">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> Que faire en cas de symptômes</h5>
        </a>
      </div>
      <div id="collapse112" name="collapse112" class="panel-collapse collapse ">
        <div class="panel-body postclass">
            <p>Si vous pr&eacute;sentez des signes d&rsquo;infection respiratoire (toux, fi&egrave;vre, difficult&eacute;s &agrave; respirer, etc...) :</p>

            <ul>
                <li>Contactez rapidement le Samu Centre 15 ou son &eacute;quivalent le 114 (pour les personnes ayant des difficult&eacute;s &agrave; entendre ou &agrave; parler)</li>
                <li>&Eacute;vitez tout contact avec votre entourage, conservez votre masque</li>
                <li>Ne vous rendez pas directement chez le m&eacute;decin, ni aux urgences de l&rsquo;h&ocirc;pital</li>
            </ul>
            <p style="margin-bottom: 0cm; font-style: normal; font-weight: normal; text-align: center;"><span style="font-size:28px;"><strong><span style="font-size:18px;">Pour toute question appelez gratuitement le :</span><br />
            <span style="font-size:24px;"><span style="color:#008000;">0 800 130&nbsp;000</span></span></strong></span></p>
        </div>
      </div>
    </div>
    
    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname1" href="#collapse113">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> D&eacute;pistages du Covid-19 - Informations <strong><span style="color:#A00606;">(au 02/11/2020)</span></strong></h5>
        </a>
      </div>
      <div id="collapse113" name="collapse113" class="panel-collapse collapse ">
        <div class="panel-body postclass">
            <h2><span style="font-size:20px;"><span style="color:#15a5df;">Centre Covid-19 du Calaisis</span></span></h2>

            <p>En partenariat avec la Ville de Calais, l&rsquo;Agence R&eacute;gionale de Sant&eacute;, l&rsquo;Association CALUR regroupant les m&eacute;decins g&eacute;n&eacute;ralistes du calaisis, les infirmier(e)s lib&eacute;rales du calaisis, et le Laboratoire calaisien SYNLAB OPALE,</p>

            <ul>
                <li>Le centre de d&eacute;pistage Covid-19 du Calaisis ouvre ses portes<strong> ce mardi 3 novembre 2020</strong>.</li>
                <li><strong>Lieux : </strong>81 Boulevard JACQUARD (anciennement MAISON POUR TOUS)</li>
                <li>Ce centre Covid-19 fonctionnera tous les jours, y compris le samedi et le dimanche,<strong> de 14h00 &agrave; 18h00</strong>.</li>
                <li>Gratuit pour les patients.</li>
                <li>Avec ou sans ordonnance. Se munir de sa carte vitale.</li>
            </ul>

            <p>Les pr&eacute;l&egrave;vements nasopharyng&eacute;s seront r&eacute;alis&eacute;s sur place par les infirmi&egrave;res lib&eacute;rales du Calaisis.</p>

            <p>La prise de rendez-vous pourra s&rsquo;effectuer sur place ou sur internet (lien du site internet &agrave; venir).</p>

            <p>Qui est prioritaire pour se faire d&eacute;pister ?</p>

            <ul>
                <li>Les personnes ayant une prescription m&eacute;dicale</li>
                <li>Les personnes symptomatiques</li>
                <li>Les personnes-contacts &agrave; risques</li>
                <li>Les professionnels de sant&eacute;</li>
            </ul>
        </div>
      </div>
    </div>  

  </div>

jQuery（文档）.ready（函数（$）{
//本节使搜索工作正常。
（功能（）{
var searchTerm，panelContainerId；
//创建不区分大小写的新contains
$.expr['：'].ContainsCaseSensitive=函数（n，i，m）{
返回jQuery（n）.text（）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};  
$（“#手风琴搜索栏”）。打开（'change keyup paste click'，function（）{
//searchTerm=$（this.val（）；
searchTerm=$（this.val（）；
var崩溃=$（“.panel group”）；
if（$（this.val（）！=“”）{
//查找面板默认值隐藏它们
collapse.find（“.panel default”）.hide（）；
$（“.panel group.hiddennote”）.remove（）；
//$（“.panel heading”）.hide（）；
美元（“.panel group”）.append（'Cliquez sur Reset afin de faire apparaitre toutes les rubriques'）；
//环通面板组
$（“.panel group”）。每个（函数（）{
//检查是否匹配
collapse.find（'.panel heading:ContainsCaseSensitive（'+searchTerm+'），.panel collapse:ContainsCaseSensitive（'+searchTerm+'）））.parent（）.show（）.css({
“边框颜色”：“ff0000”
});
$（“.panel heading”）.css（{“border color”：“#ff0000”}）；
//console.log（'term='+searchTerm）
});
}否则{
collapse.find（“.panel default”）.show（）.css({
“边框颜色”：”
});
//全部显示并删除红色背景
}
});
}());
$（'#resetbtn'）。单击（函数（）{
$（“#手风琴搜索栏”）.val（“”）；
$（“.panel group”）.find（“.panel default”）.show（）.css({
“边框颜色”：”
})；//显示所有删除红色背景
//$（“.panel heading h5”）.show（）；
$（“.panel group.hiddennote”）.hide（）；
$（“.panel heading”）.css（{“border color”：“}）；
});
});
//颜色
//$grey:#卡卡卡；
//主要
#分页容器{
边缘顶部：15px；
边缘底部：15px；
}
//搜索输入
#手风琴搜索栏容器{
位置：相对位置；
&：在{
内容：'\e003'；
字体系列：字形图标半身人；
宽度：18px；
高度：18px；
位置：绝对位置；
右：10px；
底部：10px；
利润率：20px；
}  
#手风琴搜索栏{
显示：块；
保证金：20px自动；
宽度：100%；
填充：27px 10px；
边框：1件纯色$灰色；
边界半径：25px；
大纲：0；
}
}
//使所有行都可单击
.小组标题{
a{
显示：块；
}
}
.小组标题{
填充：0px 15px；
}
.panel默认值>.panel标题{
颜色：#fff；
背景色：#15a5df；
边框颜色：#bb2727；
边界：无；
}
h5、.h5{
颜色：白色；
边缘底部：0px；
边际上限：0px；
边框：15a5df实心20px；
}
Miseà；2020年11月6日
Pleinement engagé；控制冠状病毒新冠病毒-19的传播，加来岛东南部机动部队。

集体与教育服务；se ré；未经发送的自动报价单；ponsesà；l&rsquo；急诊疗养院。

加莱劳累小镇&埃库特；公共与行政服务部；法兰西高等教育学院'；代理Ré；gionale de Santé；浇注保护剂和水泥；居住者和家庭成员都是脆弱的。


La情境é；自由配额。

Restez通知与eacute；诺特尔咨询公司和诺特尔咨询公司qui sont misesà；连续工作日



康特奴红地毯集团：
马斯克港、德皮斯塔吉和普莱昂
2010年10月30日，公共义务大港口；第11部分：综合与协调；l&rsquo；最大障碍和障碍的应用；瑞斯·丹斯·莱克斯·苏万特：

加莱区
加莱公社：


Totalité；德勒；电子空间公众



桑加特公社：


迪格·加斯顿·贝特
桑加特酒店



注意，公共关系与教育部；生育与教育；你能告诉我你的想法吗；新墨西哥州面具港39号；est pas une义务和agrave；条件d'ê；特雷修尔。Si accompagné；，这是一项义务


拉维兹，你的主要研究和评价；古力和埃格拉夫；第二件是第39件；萨翁之水酒店
&伊库特；他和她在一起
Jetez chacun de vos mouchoirs aprè；利用
&伊库特；维特兹·勒斯波因埃库特；管道和管道（悬挂式管道、管道和管道）
尊重s和E的距离；库里特与埃库特；d'；联合国m&E集团；这里是人事中心

；图像ci dessous pour l'；agrandir