老师，为什么我的点击下拉框内容不会自动提交，需要手动点击提交按钮才可以，谢谢。
来源：3-2 改写搜索框功能--自动完成
qq_慕移动3101913
2019-12-19 16:17:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/commom.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 顶部导航开始 -->
<div class="nav">
<!-- 固定宽度 -->
<div class="wrap">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-signup link">免费注册</a></li>
<li class="fl"><a href="javascript:;" target="_blank" class="nav-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="fl menu dropdown" data-active="menu">
<a href="###" target="_blank" class="link dropdown-toggle transition">我的慕淘<i class="dropdown-arrow icon transition"></i>
</a>
<ul class="fl dropdown-layer dropdown-left">
<li><a href="javascript:;" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="fl menu dropdown" data-active="menu">
<a href="###" target="_blank" class="link dropdown-toggle transition">收藏夹<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer">
<li><a href="###" target="_blank" class="menu-item" >收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="link dropdown-category">商品分类</a>
</li>
<li class="fl menu dropdown" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="link dropdown-toggle transition">卖家中心<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer">
<li class="dropdown-loading"></li>
</ul>
</li>
<li class="fl menu dropdown nav-category" data-active="menu">
<a href="###" target="_blank" class="link dropdown-toggle transition">联系客服<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-rigth">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 头部区结构 -->
<div class="header">
<div class="wrap">
<h1 class="fl"><a href="./dirSir.html" class="header-logo text-hidden">慕课网</a></h1>
<div id="header-search" class="search fl">
<!-- action 属性规定当提交表单时，向何处发送表单数据。 -->
<form action="https://s.taobao.com/search" class="search-from">
<input type="text" name="q" placeholder="灵魂美食一元抢" autocomplete="off" class="search-inputbox fl">
<!-- autocomplete 属性规定表单是否应该启用自动完成功能。 -->
<input type="submit" value="搜索" class="search-btn btn fl">
</form>
<ul class="search-layer">
<!-- <li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li> -->
</ul>
</div>
<div class="car dropdown fr"></div>
</div>
</div>
<!-- 站点导航结束 -->
<!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/search.js"></script>
<script src="js/index.js"></script>
</body>
</html>/*css reset*/
/*清除内外边距*/
body,h1,h2,h3,h4,h5,h6,p,hr,/*结构元素*/
ul,ol,li,dl,dt,dd,/*列表元素*/
form,fieldset,legend,input,button,select,textarea,/*表单元素*/
th,td,/*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body,button,input,select,textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
em,i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}/*常用公共样式*/
.wrap {
width: 1200px;
margin: 0 auto;
/* overflow: hidden; */
}
.fl {
float: left;
}
.fr {
float: right;
}
a.link {
/*链接正常颜色*/
color: #4d555d;
}
a.link:hover {
/*链接经过颜色*/
color: #f01414 !important;
}
/*隐藏文字 */
.text-hidden{
text-indent: -9999px;
overflow: hidden;
}
/* 文字溢出省略号隐藏 */
.text-ellipsis{
text-overflow: ellipsis;
white-space: nowrap; /*强制不换行 */
overflow: hidden;
}
/*多菜单旋转*/
[class*="-active"] .dropdown-arrow {
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.transition {
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/* dropdown */
/* 下拉菜单公共样式 */
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
}
.dropdown-arrow {
display: inline-block;
line-height: 1;
/* background-repeat: no-repeat; */
vertical-align: middle;
/* 下拉图标居中对齐 */
}
.dropdown-layer {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-left {
left: 0;
right: 0 auto;
}
.dropdown-rigth {
right: 0;
left: 0 auto;
}
.dropdown-loading{
width:32px;
height: 32px;
background: url(../img/loading.gif) no-repeat;
margin: 20px;
}
/* icon */
@font-face {
font-family: "iconfont";
src: url('../download/iconfont.eot?t=1576144631882');
/* IE9 */
src: url('../download/iconfont.eot?t=1576144631882#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../download/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABkQAAAJMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApMXwE2AiQDCAsGAAQgBYRtBzMbiAXIHpIkRWrBQcADJSAAIR7+f+1/+8zcbypRvIomRZM2Ok0sWhUrgdLpeGYR39KapsTCRlWVZRUNSKF9zD1wPiU3FI6EnppSE3ITbuCQAz+dtOUSAOQT907/BPog8wHluBeNNWlSF1AXB1Kge2DURVJCGTeMXfAC7xMo122gsHVydQt1ib0sELc8x4B6ISJJLF8qFDfsTeKFIqXZw+zA8+j78dcs6mSKcnbT3s1jGxbfcYryh8KcBoQoAR0uQo5JIBFHjZkdJcG4kvJMWT84Vn3wnUIhcIujOgT76+zaStAJlc+k8tSPms/gsSaqB1onvZuovyDn8/Gnl43X3xrfDt/8ePPl8c80TbaPv2obLP8aW7m/6o+mNr3WQJsF/Fm+V9yGAoIH/dl00Vv6V1qRwDdn/kf2ZJgPlO7DG/wL1cC+ZGhsV5Y0VeNwpv4cLeXKUYAD9f6mWptOXAilmib4SnRlyJUaJBM7iSIVFlGs1CrKTTg9XKEBK4lUhnGvAKHWNzLVviJX64dM7C+KNPtHsdooodxJNJxZYTi85iaTIWSjeUDPSmLleqQZ11+TswkNzmsi/p449+I4nZ4t508pJl5iQ751ZiIKFScRnoDHKAwTTDnxyZKRK5LOxzM3m140spIImjYxYhDEhkwHyGNJxFQwWjQrn79GHBshA3f01BXvEZbzpkdTI5MB5KkxHtTzKM/kthwzQihIYYkIOgGzSCiUQGnzLB+xiBF3Qio1N3YGqaHG0fbm6O+OQTnbloWzJVd2bxOGmp3sYgAAAA==') format('woff2'),
url('../download/iconfont.woff?t=1576144631882') format('woff'),
url('../download/iconfont.ttf?t=1576144631882') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../download/iconfont.svg?t=1576144631882#iconfont') format('svg');
/* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/*showhide*/
.fadeOut {
visibility: hidden !important; /*!important权重最高的意思 */
opacity: 0 !important;
}
.slideUpDownCollapse {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse {
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*.menu .dropdown*/
/* 下拉菜单独有样式 */
.menu .dropdown-toggle {
display: block;
height: 100%;
padding: 0 13px 0 12px;
border-left: 1px solid #f3f5f7;
border-left: 1px solid #f3f5f7;
}
.menu .dropdown-arrow {
/* width: 8px;
height: 6px;
background: url(../img/dropdown-arrow.png); */
margin-left: 5px;
}
.menu .dropdown-layer {
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item {
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
/* 超出文字不换行 */
}
.menu-item:hover {
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle {
background-color: #fff;
border-color: #cdd0d4;
}
/*btn*/
/* .btn {
display: inline-block;
border: none;
color: #fff;
text-align: center;
} */
/*search*/
.search {
position: relative;
border: 1px solid #cfd2d5;
}
.search-inputbox {
width: 585px;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #fff;
border: none;
}
.search-btn {
width: 73px;
height: 40px;
line-height: 40px;
font-size: 14px;
background-color: #07111b;
border: none;
color:#fff;
text-align: center;
cursor: pointer;
}
.search-layer {
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
}
.search-layer-item {
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
}
.search-layer-item:hover{
background-color: #f3f5f7;
}/* nav-顶部 */
.nav {
width: 100%;
background-color: #f3f5f7;
}
.nav .wrap {
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav .dropdown-category{
margin: 0 10px;
}
.nav-login {
color: #f01414;
margin-left: 15px;
}
.nav-signup {
margin-left: 10px;
}
.nav-mobile {
margin-left: 10px;
}
/* header-头部 */
.header{
width: 100%;
height: 124px;
background-color: #f3f5f7;
}
.header-logo,
.header .search,
.header .cart{
margin-top: 36px;
}
.header-logo{
display: block;
width: 136px;
height: 48px;
background: url(../img/header-logo.png) no-repeat;
margin-left: 15px;
}
.header .search{
margin-left: 145px;
}[
{
"url": "###",
"name": "免费开店"
},
{
"url": "###",
"name": "已卖出的宝贝"
},
{
"url": "###",
"name": "出售中的宝贝"
},
{
"url": "###",
"name": "卖家服务市场"
},
{
"url": "###",
"name": "卖家培训中心"
},
{
"url": "###",
"name": "体验中心"
}
](function($) {
'use strict'
function Dropdown($elem, options) {
this.$elem = $elem;
this.options = options;
this.$layer = this.$elem.find('.dropdown-layer'),
this.activeClass = options.active + '-active';
this._init();
}
Dropdown.DEFAULTS = {
event: "hover",
css3: true,
js: true,
animation: 'fade',
delay: 0,
active: 'dropdown'
};
Dropdown.prototype._init=function () {
var self=this;
this.$layer.showHide(this.options);
this.$layer.on('show shown hide hidden',function (e) {
self.$elem.trigger('dropdown-'+e.type);
});
if (this.options.event === 'click') {
this.$elem.on('click', function(e) {
self.show();
e.stopPropagation();
});
$(document).on('click', $.proxy(this.hide, this));
} else {
this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
}
}
//作业部分代码修改
// this.$elem.addClass(this.activeClass);
// this.$layer.showHide('show');
Dropdown.prototype.show = function() {
var self = this;
if (this.options.delay) {
this.timer = setTimeout(function() {
_show();
}, this.options.delay);
} else {
_show();
}
function _show() {
self.$elem.addClass(self.activeClass);
self.$layer.showHide('show');
}
}
Dropdown.prototype.hide = function() {
if(this.options.delay){
clearTimeout(this.timer);
}
this.$elem.removeClass(this.activeClass);
this.$layer.showHide('hide');
}
$.fn.extend({
dropdown: function(option) {
return this.each(function() {
var $this=$(this),
dropdown=$this.data('dropdown'),
options = $.extend({}, Dropdown.DEFAULTS, $(this).data(), typeof option==='object'&&option);
// dropdown(this, options);
if(!dropdown){//解决多次调用dropdown问题
$this.data('dropdown',dropdown=new Dropdown($this,options));
}
if(typeof dropdown[option]==='function'){
dropdown[option]();
}
});
}
});
})(jQuery);//做具体事件带代码
(function ($) {
//menu
$(".dropdown").dropdown({
css3: true,
js: false
});
$('.dropdown').on('dropdown-show', function (e) {
var $this = $(this),
dataLoad = $this.data('load');
if (!dataLoad) return;
if (!$this.data('loaded')) {
var $layer = $this.find('.dropdown-layer'),
html = '';
$.getJSON(dataLoad, function (data) {
// console.log(1);
// setTimeout(function () {
for (var i = 0; i < data.length; i++) {
html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'
}
$layer.html(html);
$this.data('loaded', true);
// }, 1000);
});
}
});
//header-search
var $headerSearch = $('#header-search'); //获取元素
var html = '',
maxNum = 10;
// 获得数据处理
$headerSearch.on('search-getData', function(e, data, $layer) {
var $this = $(this);
html = createHeaderSearchLayer(data, maxNum);
// 将生成的html呈现在页面中
$layer.html(html);
if (html) {
$this.search('showLayer');
} else {
$this.search('hideLayer');
}
}).on('search-noData', function(e, $layer) {
// 没获得数据处理
$(this).search('hideLayer');
$layer.html('');
}).on('click', '.search-layer-item', function() { //下拉层绑定点击事件
// 点击每项时，提交
$headerSearch.search('setInputVal', $(this).html());
$headerSearch.search('submit');
});
$headerSearch.search({ //searc调用
autocomplete: true, //autocomplete 属性规定输入字段是否应该启用自动完成功能
css3: false,
js: false,
animation: 'fade'
});
// 获取数据，生成html（创建结构）
function createHeaderSearchLayer(data, maxNum) {
var html = '',
dataNum = data['result'].length;
if(dataNum === 0){
return '';
}
for (var i = 0; i < dataNum; i++) {
if (i >= maxNum) break;
html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
}
return html;
}
})(jQuery);//做通用事情代码
(function($){
//对象，构造函数
function Search($elem, options) {
this.$elem = $elem;
this.options = options;
this.$form = this.$elem.find('.search-form');
this.$input = this.$elem.find('.search-inputbox');
this.$layer = this.$elem.find('.search-layer');
//事件代理绑定点击事件
this.$elem.on('click', '.search-btn', $.proxy(this.submit, this));
//$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。该方法通常用于向上下文指向不同对象的元素添加事件。
//假如验证为真，则执行自动完成功能
if (this.options.autocomplete) {
this.autocomplete();
}
}
Search.DEFAULTS = {
autocomplete: false, //autocomplete 属性规定输入字段是否应该启用自动完成功能
url: 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=', //往哪传
css3: false,
js: false,
animation: 'fade'
};
//提交功能
Search.prototype.submit = function() {
//假如输入为空，则提交失败
if (this.getInputVal() === '') {
return false;
}
this.$form.submit();
};
//自动完成功能
Search.prototype.autocomplete = function() {
this.$input
.on('input', $.proxy(this.getData, this))
.on('focus', $.proxy(this.showLayer, this))
.on('click', function() {
return false;
});
this.$layer.showHide(this.options);
//点击空白地方，隐藏下拉层
$(document).on('click', $.proxy(this.hideLayer, this));
};
//获取数据
Search.prototype.getData = function() {
var self = this;
console.log(this.options.url + this.getInputVal());
$.ajax({
url: this.options.url + this.getInputVal(),
dataType: 'jsonp'
}).done(function(data) {
self.$elem.trigger('search-getData', [data, self.$layer]);
}).fail(function() {
self.$elem.trigger('search-noData', [self.$layer]);
}).always(function() {
});
};
//显示下拉层
Search.prototype.showLayer = function() {
if (this.$layer.children().length === 0) return;
this.$layer.showHide('show');
};
//隐藏
Search.prototype.hideLayer = function() {
this.$layer.showHide('hide');
};
//封装getInputVal方法；获取值
Search.prototype.getInputVal = function() {
return $.trim(this.$input.val());
};
//封装setInputVal方法；设置值
Search.prototype.setInputVal = function(val) {
this.$input.val(removeHtmlTags(val));
function removeHtmlTags(str) {
return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, '');
}
};
$.fn.extend({
search: function(option,value) {
return this.each(function() {
var $this = $(this),
search = $this.data('search'),
options = $.extend({}, Search.DEFAULTS, $(this).data(), typeof option === 'object' && option);
if (!search) {
$this.data('search', search = new Search($this, options));
}
if (typeof search[option] === 'function') {
search[option](value);
}
});
}
});
})(jQuery)
// (function($){
// var $search = $('.search'),
// $form = $search.find('.search-from'),
// $input = $search.find('.search-inputbox'),
// $btn = $search.find('.search-btn'),
// $layer = $search.find('.search-layer');
// //验证
// //绑定点击事件
// $form.on('submit',function(){
// //trim()去除字符串的头尾空格:
// //val() 方法返回或设置被选元素的值。(其实是html中value的jqeury封装方法)
// if($.trim($input.val()) ===''){
// return false;
// }
// });
// //自动完成
// $input.on('input', function() {
// var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim($input.val()));
// // encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
// //$.ajax跨域，使用异步来避免回调:done(), fail(), always()
// $.ajax({
// url: url,
// dataType: 'jsonp' //数据类型，非本域查找
// }).done(function(data) { //成功之后做某事
// console.log(data);
// var html = '',
// dataNum = data['result'].length,
// maxNum = 10; //控制最大显示个数
// if (dataNum === 0) {
// $layer.hide().html('');
// return;
// }
// for (var i = 0; i < dataNum; i++) {
// if (i >= maxNum) break;
// html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
// }
// $layer.html(html).show();
// }).fail(function() { //失败之后做某事
// $layer.hide().html('');
// }).always(function() { //不管成功还是失败都会做某事
// console.log('why always me!');
// });
// });
// $layer.on('click', '.search-layer-item', function() { //利用冒泡机制事件代理，就不用给所有.search-layer-item绑定事件，占用资源
// $input.val(removeHtmlTags($(this).html())); //this表示当前点击的东西
// // $input.val($(this).text());
// // console.log($(this).text());
// // $input.parents().submit(); //parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。
// $form.submit();
// })
// //搜索框显示和隐藏
// $input.on('focus', function() { //focus()获得焦点时发生 focus 事件
// $layer.show();
// }).on('click', function() { //blur()当元素失去焦点时发生 blur 事件
// // console.log(e.originalEvent.explicitOriginalTarget)
// return false;
// // if(e.originalEvent.explicitOriginalTarget.className==='search-layer-item text-ellipsis') return;
// });
// $(document).on('click', function() {
// $layer.hide();
// })
// function removeHtmlTags(str) {
// return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, '');
// }
// })(jQuery)(function($) {
var transition = window.mt.transition; // transition兼容解决，transition.js
// 提取init公共部分
function init($elem, hiddenCallback) {
if ($elem.is(':hidden')) {
$elem.data('status', 'hidden');
if (typeof hiddenCallback === 'function') hiddenCallback();
} else {
$elem.data('status', 'shown');
}
}
// 提取show公共部分
function show($elem, callback) {
if ($elem.data('status') === 'show') return;
if ($elem.data('status') === 'shown') return;
$elem.data('status','show').trigger('show');
callback();
}
function hide($elem, callback) {
if ($elem.data('status') === 'hide') return;
if ($elem.data('status') === 'hidden') return;
$elem.data('status', 'hide').trigger('hide');
callback();
}
// 正常显示和隐藏
var silent = {
//初始化显示和隐藏的状态
// if ($elem.is(':hidden')) {
// $elem.data('status', 'hidden');
// if(typeof hiddenCallback==='function') hiddenCallback();
// } else {
// $elem.data('status', 'shown');
// }
// 提取公共init后
init: init,
// show: function($elem) {
// //判断状态，解决重复触发事件
// if ($elem.data('status') === 'show') return;
// if ($elem.data('status') === 'shown') return;
// //给元素添加状态值
// $elem.data('status', 'show').trigger('show');
// $elem.show();
// $elem.data('status', 'shown').trigger('shown');
// },
show: function($elem) {
show($elem, function() {
$elem.show();
$elem.data('status', 'shown').trigger('shown');
});
},
// hide: function($elem) {
// if ($elem.data('status') === 'hide') return;
// if ($elem.data('status') === 'hidden') return;
// $elem.data('status', 'hide').trigger('hide');
// $elem.hide();
// $elem.data('status', 'hidden').trigger('hidden');
// }
hide: function($elem) {
hide($elem, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
}
};
// 带效果的显示和隐藏，css3实现方法
var css3 = {
fade: {
init: function($elem) {
css3._init($elem, 'fadeOut');
},
show: function($elem) {
css3._show($elem, 'fadeOut');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut');
}
},
slideUpDown: {
init: function($elem) {
$elem.height($elem.height());
css3._init($elem, 'slideUpDownCollapse');
},
show: function($elem) {
css3._show($elem, 'slideUpDownCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideUpDownCollapse');
}
},
slideLeftRight: { // 左右滚动
init: function($elem) {
$elem.width($elem.width());
css3._init($elem, 'slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideLeftRightCollapse');
}
},
fadeslideUpDown: { // 淡入淡出上下滚动
init: function($elem) {
$elem.height($elem.height());
css3._init($elem, 'fadeOut slideUpDownCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideUpDownCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideUpDownCollapse');
}
},
fadeslideLeftRight: { // 淡入淡出左右滚动
init: function($elem) {
$elem.width($elem.width());
css3._init($elem, 'fadeOut slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideLeftRightCollapse');
}
}
};
css3._init = function($elem, className) {
$elem.addClass('transition');
init($elem, function() {
$elem.addClass(className);
});
};
css3._show = function($elem, className) {
show($elem, function() {
$elem.off(transition.end).one(transition.end, function() {
$elem.data('status', 'shown').trigger('shown');
});
$elem.show();
setTimeout(function() {
$elem.removeClass(className);
}, 20);
});
};
css3._hide = function($elem, className) {
hide($elem, function() {
$elem.off(transition.end).one(transition.end, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
$elem.addClass(className);
});
}
// 带效果的显示和隐藏，js实现方法
var js = {
fade: { // 淡入淡出
init: function($elem) {
js._init($elem);
},
show: function($elem) {
js._show($elem, 'fadeIn');
},
hide: function($elem) {
js._hide($elem, 'fadeOut');
}
},
slideUpDown: { // 上下滚动
init: function($elem) {
js._init($elem);
},
show: function($elem) {
js._show($elem, 'slideDown');
},
hide: function($elem) {
js._hide($elem, 'slideUp');
}
},
slideLeftRight: { // 左右滚动
init: function($elem) {
js._customInit($elem, {
'width': 0,
'padding-left': 0,
'padding-right': 0
});
},
show: function($elem) {
js._customshow($elem);
},
hide: function($elem) {
js._customHide($elem, {
'width': 0,
'padding-left': 0,
'padding-right': 0
});
}
},
fadeslideUpDown: { // 淡入淡出上下滚动
init: function($elem) {
js._customInit($elem, {
'opacity': 0,
'height': 0,
'padding-top': 0,
'padding-bottom': 0
});
},
show: function($elem) {
js._customshow($elem);
},
hide: function($elem) {
js._customHide($elem, {
'opacity': 0,
'height': 0,
'padding-top': 0,
'padding-bottom': 0
});
}
},
fadeslideLeftRight: { // 淡入淡出左右滚动
init: function($elem) {
js._customInit($elem, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
});
},
show: function($elem) {
js._customshow($elem);
},
hide: function($elem) {
js._customHide($elem, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
});
}
}
};
js._init = function($elem, hiddenCallback) {
$elem.removeClass('transition');
init($elem, hiddenCallback);
};
js._customInit = function($elem, options) {
var styles = {};
for (var p in options) {
styles[p] = $elem.css(p);
}
$elem.data('styles', styles);
js._init($elem, function() {
$elem.css(options);
});
};
js._customshow = function($elem) {
var styles = $elem.data('styles');
show($elem, function() {
$elem.show();
$elem.stop().animate($elem.data('styles'), function() {
$elem.data('status', 'shown').trigger('shown');
});
});
};
js._customHide = function($elem, options) {
hide($elem, function() {
$elem.stop().animate(options, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
});
};
js._show = function($elem, mode) {
show($elem, function() {
$elem.stop()[mode](function() {
$elem.data('status', 'shown').trigger('shown');
});
});
};
js._hide = function($elem, mode) {
hide($elem, function() {
$elem.stop()[mode](function() {
$elem.data('status', 'hidden').trigger('hidden');
});
});
};
var defaults = {
css3: true,
js: true,
animation: 'fade'
};
function showHide($elem, options) {
var mode = null;
if (options.css3 && transition.isSupport) {
mode = css3[options.animation] || css3[defaults.animation]
} else if (options.js) { //js animation
mode = js[options.animation] || js[defaults.animation];
} else {
mode = silent;
}
mode.init($elem);
return {
show: $.proxy(mode.show, this, $elem),
hide: $.proxy(mode.hide, this, $elem),
};
}
$.fn.extend({
showHide: function (option) {
return this.each(function () {
var $this = $(this),
options = $.extend({}, defaults, typeof option === 'object' && option),
mode = $this.data('showHide');
if (!mode) {
$this.data('showHide', mode = showHide($this, options));
}
if (typeof mode[option] === 'function') {
mode[option]();
}
});
}
});
})(jQuery);(function () {
var transitionEndEventName = {
transition: 'transitionend',
MozTransition: 'transitionend',
WebkitTransition: 'webkitTransitionEnd',
OTransition: 'oTransitionEnd otransitionend'
};
var transitionEnd = '',
isSupport = false;
for (var name in transitionEndEventName) {
if (document.body.style[name] !== undefined) {
transitionEnd = transitionEndEventName[name];
isSupport = true;
break;
}
}
window.mt = window.mt || {};
window.mt.transition = {
end: transitionEnd,
isSupport: isSupport
};
})();写回答
1回答
-
好帮手慕慕子
2019-12-19
同学你好， 因为form表单的类名与search.js中获取表单的类名写的不一致，所以点击下拉框的时候无法提交。
建议修改：
如果帮助到了你，欢迎采纳，祝学习愉快~
0h019-12-20
相似问题