Bootstrap/jQuery 单选按钮在 Firefox/Safari 上不起作用

Question

我有一个用于显示/隐藏部分内容的 Bootstrap 单选按钮，它在 Chrome 上完美运行，但在 Firefox 和 Safari（iPhone、iPad ......）上不起作用。 它默认显示所有内容 - 即使 5 行中有 4 行应在加载时隐藏。

另外，我在 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 -->

Answer 1

我相信我终于想通了。 问题是 jQuery 正在 Chrome 上加载（不知何故），但没有在 Firefox 或 Apple 设备上加载。

我以传统方式在文件末尾加载我的脚本，在 .php 正文中使用<script>标签。 当我对 WordPress 使用正确的方法时，它似乎终于起作用了。 我在主题的 functions.php 文件中使用了这段代码：

wp_enqueue_script('my-custom-script', get_template_directory_uri() .'/js/myscript.js', array('jquery'), null, true);