Question

<div class="hotspot">
 <div class="productName">Bag</div>
 <div class="productPrice">20$</div>
 <button>Some action</button>
</div>

我需要在所有容器上扩展按钮功能，并将其隐藏为0。

这是我的代码：https://codepen.io/andrew_88/pen/jemBgm。

我需要在所有热点容器上扩展按钮的功能，并且要以图形方式将其隐藏（不透明度：0）；我仅在单击伪:before元素（红色矩形）时才希望切换类“可见”，而在单击div（productName，productPrice，按钮）时则不希望。我找不到解决办法。

Answer 1

如果我很好地理解了您的问题，那么您希望在psuedo元素上有一个单击侦听器，这是不可能的。您可以使用点击位置来模拟它。

(function() {
    $("article").each(function() {
        $(this)
            .children(".hotspot")
            .on("touchstart click", function(e) {
                var originalEvent = e.originalEvent;

                if ($(this).hasClass("visible")) {
                    if (originalEvent.layerX < 15 && originalEvent.layerY < 20) {
                        $(this).toggleClass("visible");
                    } else {
                        alert("ciao");
                    }
                } else if (originalEvent.layerX < 15 && originalEvent.layerY < 20) {
                    $(this).toggleClass("visible");
                }
            });
    });
    $(this).toggleClass("visible");

    // $("button").on("click", function() {
    //  alert("ciao");
    // });
})();

这是工作代码：https://codepen.io/anon/pen/rqmwOX。我刚刚更改了JS部分，也将min-width更改为width。

希望这会有所帮助

如何在其容器上扩展按钮功能

1 个答案: