Question

对于艺术家的Squarespace网站，尝试在灯箱上显示一个按钮，以便用户可以直接发送有关自己喜欢的作品的消息。

当单击图像拇指时，可以显示按钮，但是在关闭灯箱时，似乎无法隐藏按钮。

**我最初是在Vanilla JS中尝试过的，但不得不使用jQuery ¯\_(ツ)_/¯ Check out on jsFiddle

在thumb-image上显示联系人按钮，单击：

$('.thumb-image').click(function () {
    var content = $("body").find('.form-block');
    content.addClass("toggle-content");
});

我试图隐藏灯箱按钮关闭。

$('.featherlight-close').click(function () {
    var hideButton = $("body").find('.form-block');
    hideButton.addClass("toggle");
});

我的思维过程细目：

事件：点击图像缩略图-> 可见灯箱
```
<img class="thumb-image loaded" src="...>
```
- 灯箱最初不存在于页面上，它是由JavaScript直接在开头的 body tag 下方加载的。
联系人按钮显示
```
<div class="form-block"></div>
```
- 试图通过jQuery的 addClass 方法和此类
  显示联系人按钮
```
.toggle-content { display: block; }
```
事件：关闭灯箱
```
<a class="lightbox-close"></a>
```
- 闭合的“ X”位于伪元素上，我发现这确实使事情变得复杂：||
```
lightbox-close:before
```
隐藏的联系人按钮-单击切换类以隐藏按钮。
```
.toggle { display: none}
```

Check out on jsFiddle

非常感谢您的帮助。

Answer 1

您必须删除现有的类并添加新的类才能切换功能

$('.thumb-image').click(function () {
    var content = $("body").find('.form-block');
    content.removeClass("toggle");
    content.addClass("toggle-content");
});

$('.featherlight-close').click(function () {
    var hideButton = $("body").find('.form-block');
    hideButton.removeClass("toggle-content");
    hideButton.addClass("toggle");
});

单击切换按钮显示中的JavaScript或jQuery

1 个答案: