很莫名其妙的一个问题？

如果把：common.css的引入注释掉，或者把'menu'值改成任意值，就能正常打印出来dropdown-hidden.

啥道理呢？

dropdown.html如下，文件放在项目第一层, 其它文件都不变，

<!DOCTYPE html>

<html>

<head>

<title>dropdown模块测试</title>

<style>

:root{

--nav-site-bg:#f3f5f7;

--nav-site-bottom-co:#cdd0d4;

}

/* dropdown */

.dropdown{

position: relative;

}

.dropdown-toggle{

position:relative;

z-index: 2;

}

.dropdown-arrow{

display: inline-block;

/* background-repeat: no-repeat; */

vertical-align:middle;

}

.dropdown-layer{

display: none;

overflow : hidden;

position: absolute;

z-index: 1;

}

.dropdown-left{

left:0;

right: auto;

}

.dropdown-right{

left: auto;

right:0;

}

/*menu dropdown */

.menu .dropdown-toggle{

display: block;

height: 100%;

padding: 0 16px 0 12px;

border-left:1px solid var(--nav-site-bg);

border-right: 1px solid var(--nav-site-bg);

}

.menu .dropdown-arrow{

/* width:8px;

height:6px;

background-image: url(../img/dropdown-arrow.png); */

margin-left:10px ;

}

.menu .dropdown-layer{

top: 100%;

background-color: #fff;

border: 1px solid var(--nav-site-bottom-co);

}

.menu-item{

display: block;

height: 30px;

line-height:30px;

padding:0 12px;

color:#4d555d;

white-space:nowrap;

}

.menu-item:hover{

background-color:var(--nav-site-bottom-co) ;

}

.menu-active .dropdown-toggle{

background-color: #fff;

border-left:1px solid #cdd0d4;

border-right:1px solid #cdd0d4;

}

/* .menu-active .dropdown-layer{

display: block;

} */

.menu-active .dropdown-arrow{

/* background-image: url(../img/dropdown-arrow-active.png); */

}

/*自己画三角形小图标*/

.icon-triangle-down{

width:0;

height:0;

border:4px solid #535b62;

border-bottom: none;

border-left-color: transparent;

_border-left-color: body背景色;

border-right-color: transparent;

_border-right-color: body背景色;

}

.menu-active .icon-triangle-down{

border-bottom: 4px solid red;

border-top: none;

}

@font-face {font-family: "iconfont";

src: url('font/iconfont.eot?t=1573124887223'); /* IE9 */

src: url('font/iconfont.eot?t=1573124887223#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('font/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANsAAsAAAAAB0AAAAMgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfAqCKIINATYCJAMMCwgABCAFhG0HRBtXBhEVlNtkf4I4xnYAtZAqSjrTk2Z2jXGWba3V3ve5jvPA+v3MLJAqUAJeAAAAAIDsadw3b3c/fLD6JRgNjHSCshTPoQDoFwUeiHv3/m8O4i5uA5XOcR6mY4knlsFuwAIwrvvNvbUfHI+jNi7JITqWxVzL6UtzH4TdnJvfEsVM3Q1OMMkg9SDTVJvkwXObRj7szFHCOyVIFL01wR4AnQkghrRTTqyQV/G/z3M5vbsKA5+fwhzXXhQd9QKMAwp0rEEHEnCBxAFpw9hNBA/wMBBAyYYXanWik5EkgFEEoO2qrADJQpQgnIIckTYsjKI7Ig8PbBcY5J+nf0AgB0YSASbGz0OKUXv53D+MEpAt5wbgLAM4wAsggLqN3lgRmfXCKaNslAMcy0OwlIJKD/vHAxhQHKhXAwA3XcMeSIbFwOiCneLpmzgAkPqCfDYoNzlGPyhQSd9HKp2c7n3Q/XaVzzGm0/n6pcluNTe1+T75IW2v8APlpuNc/RT783zd76m2hc3zWNXtslaGEBPWFeqvx8/FpfElZRnpRtZjz83mrs/YU+foj4y8K1xz5wX+Q5x/HTF3z6aFNivmeBh7WZsbrVr/+lh/5cwaYnQXp+uO1kxTo95jMrWJSS23re/IEp2AyvMvkdC8kYHjwAHwj3/xPgA/sKJf/x2kVL/3Hj99TWaiAOBqgkf/CQzPyTFwZD9aNrBFxApg49FQiqWpj0vNhcFAb1AC/gNBA/fTjcZvlCdyxhkYGWtwck6k4HhBQiUIUnLBUPIUtlzFULUIiqYAHto1ED3LYLR2wOnZIwXnDhImXiClF3AopQaDDVUA20HWvWEMBGMIl5BFVCvkkK5ofMVElwHnFZz3idxmCXBMu1x4wBp5iSntLHFFFCimCu6147AsCRqmHCMxU5Hm2LJUE0NmRJXRdcMYCMYgXIIsolrRztKtvP8VE10G3EEbSX4it1nvwGGyB5AP2noQ7VGeaWeJS0QBxVSBe82NJcwSaJr75RiJKZ2Qbo5ZRjs1VGtur6/+bxekgUsiASNOAr0F6bmOUqyCur/IgjLISUUtpA0D') format('woff2'),

url('font/iconfont.woff?t=1573124887223') format('woff'),

url('font/iconfont.ttf?t=1573124887223') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('font/iconfont.svg?t=1573124887223#iconfont') format('svg'); /* iOS 4.1- */

}

.icon {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;/*因为很可能在i标签中使用，所以扶正*/

/*抗锯齿---有些图标字体，在制作时出现半个像素的问题，在浏览器显示为一个像素，造成加粗的现象*/

-webkit-font-smoothing: antialiased;/*weblit内核*/

-moz-osx-font-smoothing: grayscale;/*火狐*/

}

.icon-gouwucheman:before {

content: "\f0178";

}

.icon-xialajiantou:before {

content: "\e629";

}

/* 下拉触发图标旋转 */

[class*='-active'] .dropdown-arrow{ /*class属性包含‘-active’的元素*/

-o-transform: rotate(180deg); /*opara*/

-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;

}

/* 显示隐藏特效 */

.fadeOut{

visibility:hidden !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;

}

</style>

</head>

<body>

<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>

</ul>

</div>

<li><a href="###" target="_blank" class="menu-item">已买到的宝贝2</a></li>

</ul>

</div>

<li><a href="###" target="_blank" class="menu-item">已买到的宝贝3</a></li>

</ul>

</div>

<!-- <button id = 'btn-show'>点我显示</button>

-->

$('.dropdown').on('dropdown-show dropdown-shown dropdown-hide dropdown-hidden ',function(e){

console.log(e.type);

});

$('.dropdown').dropdown({

css3 :true,

js : true,

animation: 'slideUpDown',

// active : 'menu',

event: 'hover',

delay:0

});

$('#btn-show').on('click',function(e){

$('.dropdown').dropdown('show');

e.stopPropagation();

});

$('#btn-hide').on('click',function(e){

$('.dropdown').dropdown('hide');

e.stopPropagation();

});

</script>

</body>

</html>

午炎子栩 2019-11-17

源自：实战：下拉菜单组件化 3-4 用构造函数的形式重写dropdown模块-发送消息、暴露方法以及单例

收起

2回答

菠萝先生 2020-01-09 15:49:44

我也出现了这个情况，也是js的slideUpDown系列的过渡动画失效了，原因是因为display是不支持过渡的，要设置高度才会有动画，而且showhide.js中，使用if is(:hidden)判断，后面直接就是else shown，所以show shown是没问题的，hidden会一直出不来

收起回答

菠萝先生 #1

搞错了，是menu-active .dropdown-layer中要把display：block去掉，不然会影响隐藏，会处在一直没有隐藏完的状态

2020-01-09 16:39:02
慕姐0416137 回复菠萝先生 #2

感谢兄弟啊，我今天也遇到了这个问题，多谢指点

2020-01-10 20:37:21
菠萝先生回复慕姐0416137 #3

找了好久。。极其莫名的一个bug

2020-01-11 09:30:30