0

我正在尝试将jQuery iToggle 插件用于我的一个项目。但它似乎无法正常工作。让我们先看代码，然后我会解释问题。

HTML<head>部分::

<link rel="stylesheet" href="http://localhost/projects/mythadmin/wp-admin/load-styles.php?c=1&amp;dir=ltr&amp;load=admin-bar,wp-admin&amp;ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="thickbox-css" href="http://localhost/projects/mythadmin/wp-includes/js/thickbox/thickbox.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_admin_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/css/mythadmin.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_itoggle_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/css/engage.itoggle.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_admin_colorpicker_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/colorpicker/css/colorpicker.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="colors-css" href="http://localhost/projects/mythadmin/wp-admin/css/colors-fresh.css?ver=3.4.2" type="text/css" media="all">
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils&amp;ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/jquery.easing.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/colorpicker/js/colorpicker.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/engage.itoggle.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/mythadmin.js?ver=3.4.2"></script>

这里所有文件都被正确加载，没有任何404s.

HTML 正文::

<div class="myth_option_container toggle">
    <label for="test_cb">Test Checkbox</label>
    <input type="checkbox" id="test_cb" name="test_cb">
</div>

调用 iToggle 函数

$(document).ready(function(){
   // Initialize iToggle Checkboxes
   $('input#test_cb').iToggle({
        easing: 'easeOutExpo',
        speed: 300
    });
});

上面的代码是从该部分mythadmin.js末尾包含的文件中调用的head。

这似乎根本不起作用，我在控制台中没有错误，所有文件都已正确加载，但我看不到切换按钮。

虽然如果我以 为目标input's parent container，我可以看到切换框并打开和关闭它，但没有easing效果（出于某种原因）。

所以说如果我改变$('input#test_cb')它$('div.toggle')可以工作（根本没有缓和效果）。

问题：

  1. 为什么当我将它直接绑定到复选框输入时这不起作用。
  2. 为什么即使easing.js加载正确，缓动效果也不起作用。

提前感谢您的时间和帮助！

4

1 回答 1

3

这里有同样的问题。尝试旧版本的 jQuery（1.4.2 分钟），它工作正常......虽然 1.8.2 似乎不能很好地工作......

已编辑：iToogle < 这个版本的 iToggle 应该适用于较新版本的 jQuery。

于 2012-10-23T14:28:54.593 回答