Question

我正在学习jquery mobile并希望在我的网站上进行滑动菜单。

在我的标题中，我已经加载了脚本：

<link rel='stylesheet' id='jquery-css-css'  href='http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css?ver=3.8.1' type='text/css' media='all' />
<script type='text/javascript' src='http://192.168.1.105/wordpress/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://192.168.1.105/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://192.168.1.105/wordpress/wp-content/themes/mag/js/responsive-menu.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js?ver=1.4.0'></script>

我按如下方式加载这些脚本：

add_action( 'wp_enqueue_scripts', 'magazine_enqueue_scripts' );

function magazine_enqueue_scripts() {
    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Raleway:400,500,900', array(), CHILD_THEME_VERSION );
    wp_enqueue_style('jquery-css','http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css');
    wp_enqueue_script( 'magazine-entry-date', get_bloginfo( 'stylesheet_directory' ) . '/js/entry-date.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'magazine-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script('jquery-mobile','http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js',array('jquery'),'1.4.0');
}

在responsive-menu.js中，我有

jQuery(function( $ ){
$(".site-container").on('swiperight', function (e) {$('#menu-panel').panel('open');}
$(".site-container").on('swipeleft', function (e) {$('#menu-panel').panel('close');}
);  
});

html结构是：

<body>
<div id="menu-panel" data-role="panel" data-position="left" data-display="reveal"></div>
<div class="site-container"></div>
</body>

另外，因为我使用的是wordpress模板，所以我必须通过代码添加菜单面板的div。我这样做了：

add_action('genesis_before','magazine_menu_panel');
function magazine_menu_panel()
{
   echo '<div id="menu-panel" data-role="panel" data-position="left" data-display="reveal"></div>';
}

但是，我不知道它为什么不起作用。

以下是我正在使用的代码的链接：http://fiddle.jshell.net/2B4Ht/11/

顺便说一句，这是我第一次在这里发帖提问，所以如果有更多信息需要提供，请告诉我。谢谢。

滑动不在jquery mobile中工作

0 个答案: