如何从顶部显示下拉菜单到 use.show()
How to show drop-down menu from top to use.show()
我使用 cssmenumaker 创建了一个下拉菜单。在桌面和移动视图上一切正常。但是,在移动视图上,当我单击下拉链接时,它会从左侧显示。但是,我想从顶部显示/向上滑动。我不是jquery专家。我正在使用以下代码-
这是实时链接实时链接
/*================ Menu ====================*/
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show("slow").addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show("slow");
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show("slow");
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 767) {
cssmenu.find('ul').show("slow");
}
if ($(window).width() <= 767) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "",
format: "multitoggle"
});
});
})(jQuery);
尝试slideDown();
show();
使用 slideDown() 函数而不是 show() 函数
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- jQuery:.click(function(){(element),collapse('show',f
- Bootstrap 3 Datepicker v4:dp.show和dp.change事件在Datepicker内联时不
- JQuery hide()在show()之后不起作用,反之亦然
- 任何将(SSH)终端嵌入到一些HTML5表示系统中的想法(例如,show.js)
- 使用angularjs ng Show/ng hide显示和隐藏不同的内容
- 我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE
- Unit-testing multiple use cases with Karma & Mocha.js
- 如何在AngularJS视图中使用promise(ng-show)
- 函数hide()、prev()、show()被组装以获得所需的结果,但无法理解其工作原理
- AngularJS:如何使用java脚本函数更改跨度的ng-show条件
- Ionic Show Webpage
- Javascript Show Hide-将切换操作从复选框更改为<a href>链接
- flot: show yaxis values
- show-hide只在ajax调用中第一次工作
- 为什么我不能在'show.bs.modal'
- 请有人修复这个SHOW/HIDE表Javascript代码
- Use show or shown in JavaScript
- 如何从顶部显示下拉菜单到 use.show()
- Use .split() and ng-show