按下折叠或展开图片时如何连接我的滑动切换按钮

Question

我正在尝试连接我的切换按钮以在按下按钮时折叠和展开图片，但我发现很难实现这一点。我将不胜感激任何帮助。

<label class="switch">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="hide" data-off="show"></span> 
<span class="switch-handle"></span> 
</label>

<img src="sit1eq.jpg" width="600px">  <!-- (image I want to hide and show) -->

您可以在 JSFiddle 上找到按钮的 CSS。

JSFiddle

Answer 1

所以你想要做的是向开关添加某种事件侦听器（在本例中为 input），这样当你选中或取消选中输入时，JavaScript 可以执行你的操作想要它。

我用一些 JavaScript 修改了你的 jsfiddle（我添加了 jQuery 库）：

$('.switch-input').click((event) => {

  let _switch = $(event.target);

  if (_switch.is(':checked')) {
    $('img').hide();
  }
  else {
    $('img').show();
  }

});

如果您想尝试一下代码，这里是 jsfiddle：https://jsfiddle.net/mv9r5a3o/30/

如果您想要一些比 show() 或 hide() 更炫的效果，请随意更改周围的效果！希望这对您有所帮助 - 如有任何问题，请随时提出！

Answer 2

尝试将此 JS 添加到您的 fiddle:

// Get elements from the DOM
var checkbox = document.getElementsByClassName("switch-input")[0];
var img = document.getElementsByTagName("img")[0];

// Hide image by default
img.style.display = "none";

// Hide/show image on click depending on checkbox value
checkbox.addEventListener("click", e => 
  img.style.display = e.target.checked ? "block" : "none"
);

但是，您几乎肯定想将 id 添加到您的 DOM 节点，因为我使用的 getter 非常脆弱。

按下折叠或展开图片时如何连接我的滑动切换按钮

How to connect my sliding toggle button when pressed to the collapse or expand a picture

html

javascript

button

toggle