Question

我有以下问题，我想创建一些剧透。到目前为止，这已经奏效了，但我希望如果扰流板打开并且点击另一个，则打开再次关闭。

<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>

<div id="spoiler" style="display:none"> 
  Content
</div> 
<br><br>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Show/hide</button>

<div id="spoiler2" style="display:none"> 
  Content2
</div>

Answer 1

为所有破坏者分配一个公共类，然后点击使用类名隐藏所有破坏者的内容，只显示你想要显示的那个：

我为此创建了一个函数：

＆＃13;

<script>
function showSpoiler(spoilerId)
{
  var spoilers = document.getElementsByClassName('spoilers');
  for(var i=0;i<spoilers.length; i++)
  {
    spoilers[i].style.display = "none";
  }
  document.getElementById(spoilerId).style.display = "block";
}
</script>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler');">Show/hide</button>

<div id="spoiler" class="spoilers" style="display:none"> 
  Content
</div> 
<br><br>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler2');">Show/hide</button>

<div id="spoiler2" class="spoilers" style="display:none"> 
  Content2
</div>

＆＃13;

spoilers是在显示特定类之前需要隐藏的公共类。

<强>记住

getElementsByClassName()给出了一个数组，这就是for循环到位的原因。

Answer 2

为了让您更容易入手，我将为您提供一个针对单选按钮的事件监听器的示例。

代码：

＆＃13;

document.getElementById("type_test").addEventListener("click", functio_test);
        document.getElementById("type_test1").addEventListener("click", functio_test);
        function functio_test(){
            var x = document.querySelector('input[name="type_test"]:checked').value;
            //var x = document.forms[0].elements.type_test.value;
            if(x == "ola"){
                 alert("Ola José");
                 document.getElementById('disp_0').style.display = 'block';
                 document.getElementById('disp_1').style.display = 'none';
            }
            else if(x == "adeus"){
                 alert("Adeus José");
                 document.getElementById('disp_1').style.display = 'block';
                 document.getElementById('disp_0').style.display = 'none';
            }
            else {
                alert("Continua José");
            }
        }

＆＃13;

 <div id="select_0">
    <br> <input id = "type_test" type="radio" name="type_test" value="ola"> ola 
    <input id = "type_test1" type="radio" name="type_test" value="adeus"> adeus <br/> <br><br/>
    </div>
    <div id="disp_0" style="display:none">
    <input type="text" name="lastname" value="ola Jose" ><br><br/>
    </div>
    <div id="disp_1" style="display:none">
    <input type="text" name="lastname1" value="Adeus Jose" ><br><br/>
    </div>

＆＃13;

我希望这篇文章可以帮助你。

Answer 3

您可以使用类来完成此任务（class="spoilers"）

＆＃13;

<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler')"> Show/hide </button>

<div id="spoiler" style="display:none" class="spoilers"> 
  Content
</div> 
<br><br>
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler2')"> Show/hide </button>

<div id="spoiler2" style="display:none" class="spoilers"> 
  Content2
</div>

<script>
  function toggleSpoiler(id) {
    var spoilers = document.getElementsByClassName("spoilers");
    for(var i = 0; i < spoilers.length; i++) {
      if (spoilers[i].id != id) {
        spoilers[i].style.display = "none";
      }      
    }
    
    if(document.getElementById(id).style.display=='none') {
      document.getElementById(id).style.display='';
    } else { 
      document.getElementById(id).style.display='none';
    }
  }
</script>

＆＃13;

Answer 4

我这样做的方法是创建两个额外的类并添加一个额外的div来使用父/子关联来确定需要显示哪个扰流器（与按钮相关）。

从课程开始，让他们打电话给他们

.spoiler

和

。主动

这个想法是让.spoiler类隐藏，而.active类显示，如下所示：

.spoiler {
  display:none;
}
.spoiler.active {
  display:block;
}

所有剧透元素都会将.spoiler作为一个类，只有当前活动的剧透者会有.active类，现在让我们创建我们的新div，它会将剧透和他们的按钮捆绑在一起以拥有一个共同的父级。

<div class="spoiler-item">
    <button title="Click to show/hide content">
        Show/Hide
    </button>
    <div class="spoiler">
        Content
    </div>
</div>

<div class="spoiler-item">
    <button title="Click to show/hide content">
        Show/Hide
    </button>
    <div class="spoiler">
        Content2
    </div>
</div>

现在我们可以使用亲戚＆＃34;剧透物品＆＃34;当按下按钮以确定哪个扰流板与按下的按钮相关时，同时删除＆＃34; active＆＃34;来自所有其他＆＃34;扰流者＆＃34;确保一次只显示一个扰流板的元素。

我建议使用jQuery，由于时间限制，我无法在纯JS中使用它。

$(document).ready(function() {
  $('.spoiler-item button').click(function(e) {
    if($(this).parent('.spoiler-item').find('.spoiler').hasClass('active')) { // If the item we've selected is already active
      $(this).parent('.spoiler-item').find('.spoiler').removeClass('active');
      return;
    }
    $('.spoiler.active').removeClass('active'); // Close all open spoilers
    $(this).parent('.spoiler-item').find('.spoiler').addClass('active');    // Open relative spoiler
  });
});

请参阅JSFiddle以获得工作答案：https://jsfiddle.net/vvm4xe0m

点击另一个扰流板时关闭扰流板

4 个答案: