Question

我正在创建一个wordpress主题，我想使用tinynav jQuery插件。

我添加了

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/mbn-jq/tinynav.js"></script>

进入标题，当我使用firebug时，我可以看到它很好，在调用jQuery

接下来，在tinynav.js文件的底部，我添加了函数：

$(function () {
$("#menu-main").tinyNav();
});

就在最底层。

然后我加入了样式表：

.tinynav { display: block }
#menu-main { display: none }

当我经历断点时，我的菜单消失，但下拉列表没有出现

当我查看代码时，我可以看到它没有添加任何标记，所以有些东西根本不起作用！

Answer 1

为什么不尝试这个wordpress插件..

https://wordpress.org/plugins/tinynav/

Answer 2

有点旧但仍然相关...... - 我使用tinynav很多，因为它很轻;

1）首先检查您是否包含了所需的库。您应该使用wp-enque-script / css - 但我在这里回应，包括来自原始站点（http://tinynav.viljamis.com/）。请注意，您可能不需要包含jquery min文件，因为WP包含的版本可以正常使用;

 $j = jQuery.noConflict();
        $j(document).ready(function(){
            $j('#menu-main-nav').tinyNav({
   active: 'current-menu-item' // Set the "active" class
   // header: 'Menu', // String: Specify text for "header" and show header instead of the active item       
});
});

2）检查以确保在tinynav.js脚本中使用过jQuery没有冲突。还可以使用Firebug来检查＃menu-main-nav是正确的类或ID;

.tinynav { 
display:none 
}

3）在您的mobile.css中 - 确保文件顶部有以下内容：

/*-------------------------------------------*/
/* #MOBILE 320px (Portrait)*/
/*-------------------------------------------*/
@media only screen and (max-width: 480px) , screen and (max-device-width: 480px) {


/* Hide Main Nav UL - replace with tinynav */

#mainMenu ul {
display: none !important;
}

.tinynav {
display: block !important;
background: none repeat scroll 0 0 #eee;
border: 1px solid #666;
color: #111;
}


} /* end break point */

4）然后在断点确保你显示tinynav罚款;

function upload() {
    var img = document.getElementById('image');
    var imageURI = img.src;
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    var params = new Object();
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    ft.upload(imageURI, "https://www.example.com/upload.php", win, fail,
        options);
}

将tinynav添加到wordpress

2 个答案: