从切换按钮中移除javascript

问题描述

这是当前切换按钮的代码。我想通过使用复选框来删除它的JavaScript组件。我的唯一要求是我必须使用一个html元素来实现这一点。

以下是代码示例：

.toggler {width：140px; height：40px;背景颜色：＃B3B3B3;颜色：#FFF;明确：两者; border-radius：5px; font-size：12px; / *新的样式在这里：* / padding：0 0 0 24px;盒子尺寸：边框;显示：inline-block;位置：相对; line-height：40px; text-align：center;光标：指针; transition：padding .25s ease;}。toggler.active {padding：0 24px 0 0;}。toggler：before {content：'';显示：块; width：20px;身高：36px;背景颜色：＃4D4D4D;位置：绝对; left：2px; top：2px; border-radius：5px; / *转换使其看起来更平滑* / transition：left .4s ease;}。toggler.active:before {left：calc（100％ - 22px）;} < div class =toggler> Text Value< / div>

JsFiddle：

我可以用< input type =checkboxclass =toggler> Text Value< / input> 改为

编辑：

b

为了更具体地说明我想要的内容，我希望将按钮切换到不带任何javascript组件的按钮。这应该只是CSS和HTML。我还想只维护一个html元素来完成这项工作。

解决方案

正如您在上一篇文章中所提到的，无法实现只有一个复选框，因为复选框不能有 content ，因此没有伪元素 :: before 或 :: after ，因为它们都在 content 上操作。

  .togglerCheckbox {display：none; } .toggler {width：140px; height：40px;背景颜色：＃B3B3B3;颜色：#FFF;明确：两者; border-radius：5px; font-size：12px; / *新的样式在这里：* / padding：0 0 0 24px;盒子尺寸：边框;显示：inline-block;位置：相对; line-height：40px; text-align：center;光标：指针; transition：padding .25s ease;}。togglerCheckbox：checked + .toggler {padding：0 24px 0 0;}。toggler：before {content：'';显示：块; width：20px;身高：36px;背景颜色：＃4D4D4D;位置：绝对; left：2px; top：2px; border-radius：5px; / *转换使其看起来更平滑* / transition：left .4s ease;}。togglerCheckbox：checked + .toggler：before {left：calc（100％ -  22px）;}  

< input type =checkboxid =mycheckboxclass =togglerCheckbox/>< label for =mycheckboxclass =toggler> Text Value< / label>

Here is the code that currently toggles a button. I would like to remove the javascript component of it by maybe using a checkbox. The only requirement I have is that I have to use a single html element to accomplish this.

Here is the code sample:

document.querySelector('.toggler').addEventListener('click', function(e) {
  this.classList.toggle('active');
});

.toggler {
  width: 140px;
  height: 40px;
  background-color: #B3B3B3;
  color: #FFF;
  clear: both;
  border-radius: 5px;
  font-size: 12px;
  /* new styles here: */
  padding: 0 0 0 24px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: padding .25s ease;
}

.toggler.active {
  padding: 0 24px 0 0;
}

.toggler:before {
  content: '';
  display: block;
  width: 20px;
  height: 36px;
  background-color: #4D4D4D;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 5px;
  /* transition to make it look smoother */
  transition: left .4s ease;
}

.toggler.active:before {
  left: calc(100% - 22px);
}

<div class="toggler">Text Value</div>

JsFiddle: https://jsfiddle.net/3bfzagpm/2/

Can I accomplish this with <input type="checkbox" class="toggler">Text Value</input> Instead?

EDIT:

To be more specific what I want, I would like to have the toggle of the button without any javascript component to it. This should only be CSS and HTML. I would also like to maintain only 1 html element to accomplish this.

解决方案

As mentioned in your previous post, it cannot be achieved with only a checkbox because a checkbox cannot have content, and thus, no pseudo elements ::before or ::after, since both operate on content.

.togglerCheckbox {
  display: none; }

.toggler {
  width: 140px;
  height: 40px;
  background-color: #B3B3B3;
  color: #FFF;
  clear: both;
  border-radius: 5px;
  font-size: 12px;
  /* new styles here: */
  padding: 0 0 0 24px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: padding .25s ease;
}

.togglerCheckbox:checked + .toggler {
  padding: 0 24px 0 0;
}

.toggler:before {
  content: '';
  display: block;
  width: 20px;
  height: 36px;
  background-color: #4D4D4D;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 5px;
  /* transition to make it look smoother */
  transition: left .4s ease;
}

.togglerCheckbox:checked + .toggler:before {
  left: calc(100% - 22px);
}

<input type="checkbox" id="mycheckbox" class="togglerCheckbox" /><label for="mycheckbox" class="toggler">Text Value</label>

这篇关于从切换按钮中移除javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！