如何解决在Firefox / Edge和Safari上更改项目时，Bootstrap Accordion闪烁
在Windows 10上测试
适用于： 铬
但不是： 火狐浏览器 边缘 Safari
精简测试用例：
<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 à jour le 6 novembre 2020</strong></span></span></p><br />
<p style="text-align: center;"><span style="font-size:18px;"><strong>Pleinement engagé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é se réunissent quotidiennement autour du Maire pour apporter les meilleures réponses à l’urgence sanitaire.<br />
La Ville de Calais travaille également avec les services de la Préfecture des Hauts de France et de l'Agence Régionale de Santé pour protéger les habitants et prendre soin des plus fragiles.</span></p><br />
<p style="text-align: center;"><span class="_2cuy _19ii _2vxa">La situation évolue quotidiennement.<br />
Restez informé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 à 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>à partir de 11 ans</strong> en complément de l’application des gestes barriè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é de l’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éfecture précise que si vous souhaitez courir ou faire du vélo le port du masque n'est pas une obligation à condition d'être seul. Si accompagné,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égulièrement pendant au moins trente secondes avec de l'eau et du savon</li>
<li>Éternuez et toussez dans votre coude</li>
<li>Jetez chacun de vos mouchoirs après utilisation</li>
<li>Évitez les poignées de mains ou les embrassades (pendant cette période d'épidémie)</li>
<li>Respectez la distance de sécurité d'un mètre entre les personnes</li>
</ul>
<p style="text-align:center;"><em><span style="color:#FF0000;"><strong>Cliquez sur l'image ci-dessous pour l'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&width=700&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’un voyage en zone à risque d’exposition ou d'un foyer épidémique français (dit "cluster"),il est conseillé de surveiller son état de santé et de prendre les précautions suivantes pendant 14 jours.</font></font></font></p>
<ul>
<li>Prendre sa tempé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’éventuelle apparition de symptômes d'infection respiratoire.</li>
<li>Rester chez soi,prévenir son employeur et privilégier le télétravail.</li>
<li>Porter un masque de protection,lors de vos sorties ou vos contacts.</li>
<li>Éviter toute sortie non indispensable (cinéma,restaurant).</li>
<li>Réduire ses contacts sociaux</li>
<li>Éviter de fréquenter des lieux où se trouvent des personnes fragiles (EHPAD,écoles,hô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ésentez des signes d’infection respiratoire (toux,fièvre,difficultés à respirer,etc...) :</p>
<ul>
<li>Contactez rapidement le Samu Centre 15 ou son équivalent le 114 (pour les personnes ayant des difficultés à entendre ou à parler)</li>
<li>Évitez tout contact avec votre entourage,conservez votre masque</li>
<li>Ne vous rendez pas directement chez le médecin,ni aux urgences de l’hô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 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é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’Agence Régionale de Santé,l’Association CALUR regroupant les médecins généralistes du calaisis,les infirmier(e)s libérales du calaisis,et le Laboratoire calaisien SYNLAB OPALE,</p>
<ul>
<li>Le centre de dé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 à 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élèvements nasopharyngés seront réalisés sur place par les infirmières libérales du Calaisis.</p>
<p>La prise de rendez-vous pourra s’effectuer sur place ou sur internet (lien du site internet à venir).</p>
<p>Qui est prioritaire pour se faire dépister ?</p>
<ul>
<li>Les personnes ayant une prescription médicale</li>
<li>Les personnes symptomatiques</li>
<li>Les personnes-contacts à risques</li>
<li>Les professionnels de santé</li>
</ul>
</div>
</div>
</div>
</div>
但是如果您进入我的网站，会在jsfiddle上看到我的问题，它可以工作！这是我工作的网站：https://www.calais.fr/fr/faq2
如您所见，选择其他主题时，您会看到一种闪烁。当我将代码粘贴到jsfiddle上并进行尝试时，我理解（我认为）这个问题来自于我关闭以打开新代码的主题。我进行了搜索，但未找到解决方案。我该怎么办才能在Firefox / Edge和Safari上解决此问题（因为我的程序在chrome上工作得很好）
谢谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
