该功能在实时浏览器中运行良好(在Firefox、Safari和Chrome上试用过)。
然而,当使用水豚Webkit进行测试时,它似乎不起作用-菜单在单击时永远不可见
基本实现如下:
菜单是一个
<ul>
<div>
<div class="location-card">
...
<div class="location-card__menu-btn">
<%= inline_svg("icons/menu-btn-icon.svg", height: "20px", width: "20px") %>
<ul class="location-card__menu">
<li>Delete</li>
<li>Open</li>
<li>Share</li>
...
</ul>
</div>
</div>
简单javascript/jquery设置一个toggle类(
location-card--menu-open
)在顶层
<
$(".location-card").on("click", ".location-card__menu-btn", function(e) {
var card = $(e.currentTarget).parents(".location-card");
$(card).addClass("location-card--menu-open");
});
CSS格式
最后,菜单的CSS默认为
display: none
,但更改为
display: flex
当父级上存在toggle类时。
.location-card__menu {
display: none;
...
}
.location-card--menu-open .location-card__menu {
display: flex;
...
}
RSpec/水豚
测试时,我会执行以下操作:
find(".location-card__menu-btn").click
expect(page).to have_selector(".location-card__menu", visible: true)
水豚犯了错误:
expected to find visible css ".location-card__menu" within
正如错误所说,即使正确添加了toggle类,元素仍被找到但不可见。添加
显示:flex
即使父级上存在toggle类,也不会应用。
我可以通过删除
显示:无
知道为什么一旦DOM改变,Capybara或底层浏览器可能无法重新应用CSS逻辑吗?
我正在使用:
-
rspec轨道3.4.0
-
-
水豚webkit 1.15.0
谢谢!