Javascript 在一个页面中为多个实例应用CSS动画类

我尝试用CSS中的动画按钮为社交媒体制作共享按钮。但我想在一页中显示一些按钮。对于不同的内容。但我发现这对第二个按钮不起作用。如果单击第二个按钮，则第一个按钮将显示动画，而不是第二个按钮。我的问题是如何使CSS应用于我页面中的每个按钮

这是小提琴：

这是我的HTML：

      <title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
        <div class="share-button">
          <input class="toggle-input" id="toggle-input" type="checkbox" />
          <label for="toggle-input" class="toggle"></label>
          <ul class="network-list">
            <li class="twitter">
              <a href="#">Share on Twitter</a>
            </li>
            <li class="facebook">
              <a href="#">Share on Facebook</a>
            </li>
            <li class="googleplus">
              <a href="#">Share on Google+</a>
            </li>
          </ul>
        </div>
    </div>
    <br>
    <br>
    <div class="share">
        <div class="share-button">
          <input class="toggle-input" id="toggle-input" type="checkbox" />
          <label for="toggle-input" class="toggle"></label>
          <ul class="network-list">
            <li class="twitter">
              <a href="#">Share on Twitter</a>
            </li>
            <li class="facebook">
              <a href="#">Share on Facebook</a>
            </li>
            <li class="googleplus">
              <a href="#">Share on Google+</a>
            </li>
          </ul>
        </div>
    </div>

---

您需要为每个按钮使用不同的

id

，并将

的
属性与相同的id相匹配：

例如：



这很简单。您只需更改输入的id名称，并在标签中调用相同的名称。
即。
用上述代码更改您的代码。
您只需为类的div下的复选框和标签定义不同的ID
共享按钮
。
请参阅以下代码：

      <title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
        <div class="share-button">
          <input class="toggle-input" id="toggle-input" type="checkbox" />
          <label for="toggle-input" class="toggle"></label>
          <ul class="network-list">
            <li class="twitter">
              <a href="#">Share on Twitter</a>
            </li>
            <li class="facebook">
              <a href="#">Share on Facebook</a>
            </li>
            <li class="googleplus">
              <a href="#">Share on Google+</a>
            </li>
          </ul>
        </div>
    </div>
    <br>
    <br>
    <div class="share">
        <div class="share-button">
          <input class="toggle-input" id="toggle-input1" type="checkbox" />
          <label for="toggle-input1" class="toggle"></label>
          <ul class="network-list">
            <li class="twitter">
              <a href="#">Share on Twitter</a>
            </li>
            <li class="facebook">
              <a href="#">Share on Facebook</a>
            </li>
            <li class="googleplus">
              <a href="#">Share on Google+</a>
            </li>
          </ul>
        </div>
    </div>

Profill





























          <input class="toggle-input" id="toggle-input-1" type="checkbox" />
          <label for="toggle-input-1" class="toggle"></label>

          <input class="toggle-input" id="toggle-input-2" type="checkbox" />
          <label for="toggle-input-2" class="toggle"></label>

this is simple. you just change your id name of the input and call same name in label.

ie. 

<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>

change your code with above code.

      <title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
        <div class="share-button">
          <input class="toggle-input" id="toggle-input" type="checkbox" />
          <label for="toggle-input" class="toggle"></label>
          <ul class="network-list">
            <li class="twitter">
              <a href="#">Share on Twitter</a>
            </li>
            <li class="facebook">
              <a href="#">Share on Facebook</a>
            </li>
            <li class="googleplus">
              <a href="#">Share on Google+</a>
            </li>
          </ul>
        </div>
    </div>
    <br>
    <br>
    <div class="share">
        <div class="share-button">
          <input class="toggle-input" id="toggle-input1" type="checkbox" />
          <label for="toggle-input1" class="toggle"></label>
          <ul class="network-list">
            <li class="twitter">
              <a href="#">Share on Twitter</a>
            </li>
            <li class="facebook">
              <a href="#">Share on Facebook</a>
            </li>
            <li class="googleplus">
              <a href="#">Share on Google+</a>
            </li>
          </ul>
        </div>
    </div>