我创建了一个带有标签和“向下插入符号”图标的下拉按钮。当下拉菜单打开时，“下插入符”图标应该向上旋转，并且这是有效的。
但是，如果我单击按钮标题或“下插入符”图标，此事件将不起作用。
$(document).ready(function() {
$('.dropdown').click(function(e) {
$($(e.target).find('.down-caret').toggleClass('open-caret'));
e.stopPropagation();
$(document).click(function() {
$('.dropdown-menu').removeClass('open');
$('.down-caret').removeClass('open-caret');
});
});
});
a {
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .drop {
background-color: #3498db;
color: #fff;
padding: 1rem;
border-radius: 6px;
position: relative;
display: inline-block;
}
.down-caret {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
display: inline-block;
margin-left: 6px;
top: -3px;
position: relative;
transform: rotate(0deg);
transition: all 0.25s ease-in;
}
.open-caret {
transform: rotate(180deg);
transition: all 0.25s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
<a class="drop" href="#">
<span>Dropdown</span>
<i class="down-caret"></i>
</a>
</li>
我需要在我的代码中存在 span 和 i 标签。
这是我的完整代码jsFiddle https://jsfiddle.net/bahmanparsamanesh/ad4g12wj/
只需要定位锚元素并稍微改变你的 JS 即可。
$(document).ready(function(){
$('a.drop').click(function(e){
e.preventDefault();
$('.down-caret',this).toggleClass('open-caret');
e.stopPropagation();
$(document).click(function(){
$('.dropdown-menu').removeClass('open');
$('.down-caret').removeClass('open-caret');
});
});
});
a {
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .drop {
background-color: #3498db;
color: #fff;
padding: 1rem;
border-radius: 6px;
position: relative;
display: inline-block;
}
.down-caret {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
display: inline-block;
margin-left: 6px;
top: -3px;
position: relative;
transform: rotate(0deg);
transition: all 0.25s ease-in;
}
.open-caret {
transform: rotate(180deg);
transition: all 0.25s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
<a class="drop" href="#">
<span>Dropdown</span>
<i class="down-caret"></i>
</a>
</li>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
