У меня есть переключатели Bootstrap для отображения / скрытия частей контента, и он отлично работает в Chrome, но не работает ни в Firefox, ни в Safari (iPhone, iPad ...). Он показывает весь контент по умолчанию - хотя 4 из 5 строк должны быть скрыты при загрузке.
Кроме того, я получаю эти две ошибки в Firefox (они не отображаются в Chrome):
TypeError: t is undefined[Learn More]
bootstrap.min.js:6:2080
ReferenceError: jQuery is not defined[Learn More]
togglebuttons.js:115:1
Это сайт WordPress с одной из самых популярных платных тем на рынке, так что, полагаю, с jQuery проблем быть не должно, но, похоже, что так и есть. В чем может быть причина?
Когда я пытался загрузить jQuery вручную непосредственно перед загрузкой сценария из приведенного ниже фрагмента, страница даже не загружалась, потому что у меня возникали некоторые конфликты jQuery.
Вот код:
(function($) {
var $first_visible = 1;
var $second_visible = 0;
var $third_visible = 0;
var $fourth_visible = 0;
var $fifth_visible = 0;
// hide all except the first one implicitly
$( document ).ready(function() {
$('#row2').hide('1');
$('#row3').hide('1');
$('#row4').hide('1');
$('#row5').hide('1');
});
$("input[name=options]").change(function () {
if(this.value == "1") {
if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$second_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$third_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$fourth_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$fifth_visible = 0;
}
$first_visible = 1;
}
else if(this.value == "2") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$first_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$third_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$fourth_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$fifth_visible = 0;
}
$second_visible = 1;
}
else if(this.value == "3") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$first_visible = 0;
}
else if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$second_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$fourth_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$fifth_visible = 0;
}
$third_visible = 1;
}
else if(this.value == "4") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$first_visible = 0;
}
else if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$second_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$third_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$fifth_visible = 0;
}
$fourth_visible = 1;
}
else if(this.value == "5") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$first_visible = 0;
}
else if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$second_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$third_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$fourth_visible = 0;
}
$fifth_visible = 1;
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TOGGLE BUTTONS -->
<div class="row togglebuttons-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" value="1" checked><span class="radio-span">Show 1</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off" value="2"><span class="radio-span">Show 2</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off" value="3"><span class="radio-span">Show 3</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option4" autocomplete="off" value="4"><span class="radio-span">Show 4</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option5" autocomplete="off" value="5"><span class="radio-span">Show 5</span>
</label>
</div><!-- btn-group -->
</div><!-- row -->
<!-- *************************************
********** GENEROVANIE KONTAKTOV ********* -->
<div class="row row-eq-height contact-list" id="row1">
hello 1
</div><!-- row1 -->
<div class="row row-eq-height contact-list" id="row2">
hello 2
</div><!-- row2 -->
<div class="row row-eq-height contact-list" id="row3">
hello 3
</div><!-- row3 -->
<div class="row row-eq-height contact-list" id="row4">
hello 4
</div><!-- row4 -->
<div class="row row-eq-height contact-list" id="row5">
hello 5
</div><!-- row5 -->