我创建了一个带标签和“向下插入”图标的下拉按钮.当下拉菜单打开时,“向下插入”图标应该向上旋转,这是有效的.
但是,如果我点击按钮标题或“向下插入”图标,此事件不起作用.
$(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>
解决方法
原因是,您正在使用当前单击的元素$(e.target)来查找具有类down-caret的元素.
如果单击图标或文本,则指定的类中没有元素.
你只需要将$(e.target)更改为$(‘.dropdown’)就可以了.
$(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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。