单击按钮的标题或按钮图标后,按钮的事件不起作用 [英] Button's event doesn't work after click on button's title or button's icon
问题描述
我创建了一个带标签和向下插入图标的下拉按钮。当下拉菜单打开时,向下插入图标应该向上旋转,这是有效的。
I created a dropdown button with tag and a "down-caret" icon. when dropdown menu is open, "down-caret" icon should rotate up and this is working.
但如果我点击按钮标题或向下插入图标,此事件将无效。
But if I click on button title or "down-caret" icon, this event not work.
$(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>
我需要跨度&安培;我标记存在于我的代码中。
I need span & i tags to be exist in my code.
这是我的完整代码 jsFiddle
推荐答案
原因是,您正在使用当前点击的元素 $(e.target)
用类 down-caret
查找里面的元素。
The reason is, you are using currently clicked element $(e.target)
to find an element inside with class down-caret
.
如果你点击 icon
或文字
内部没有指定类的元素。
And if you click on icon
or the text
there is no element inside with that specified class.
您只需将 $(e.target)
更改为 $('。下拉')
,你就完成了。
You just need to change $(e.target)
to $('.dropdown')
and you are done.
$(document).ready(function(){
$('.dropdown').click(function(e){
$('.dropdown').find('.down-caret').toggleClass('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/1.9.1/jquery.min.js"></script>
<li class="dropdown">
<a class="drop" href="#">
<span>Dropdown</span>
<i class="down-caret"></i>
</a>
</li>
这是 fiddle
这篇关于单击按钮的标题或按钮图标后,按钮的事件不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!