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

I have the following problem, I would like to create a few spoilers. This has worked so far, but I would like that if a spoiler is open and one clicks on another, the opened again closes.

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

<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>

4 个解决方案

#1

Assign a common class to all spoilers and on click hide the contents of all the spoilers using the class name and simply show only the one you want to show:

为所有剧透器分配一个公共类,然后单击使用类名隐藏所有剧透的内容,只显示您要显示的那个:

I have created a function for this like so:

我已经为此创建了一个函数:

<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>

spoilers is the common class which needs to be hidden before showing the specific one.

剧透是一个常见的类,需要在显示特定的类之前隐藏。

Remember

getElementsByClassName() gives out an array that is why the for loop is in place.

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

#2

To make it easier for you to start, I'll give you an example made for Event Listener for Radio buttons.

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

code:

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é");
            }
        }

 <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>

I hope the post helps you.

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

#3

you can use classes to accomplish this (class="spoilers")

你可以用类来完成这个(class =“剧透”)

<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>

#4

The way I would do this would be to create two additional classes and add an additional div to use the parent/child association to determine which spoiler (in relation to the button) needs to be displayed.

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

Starting off with the classes, let's call them

从课程开始,我们打电话给他们

.spoiler

and

.active

The idea is to make the .spoiler class hide and the .active class show, like so:

这个想法是让.spoiler类隐藏,并且.active类显示,如下所示:

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

All spoiler elements would have .spoiler as a class and only the currently active spoiler would have the .active class, now let's create our new div which will bundle the spoilers and their buttons to have a common parent.

所有扰流器元素都将.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>

Now we can use the relative "spoiler-item" class when a button is pressed to determine which spoiler is related to the button being pressed and also remove the "active" class from all other "spoiler" elements to make sure only one spoiler is shown at a time.

现在我们可以在按下按钮时使用相对的“扰流项目”类来确定哪个扰流板与被按下的按钮有关,并且还从所有其他“扰流板”元素中移除“活动”类以确保只有一个扰流板是一次显示。

I recommend using jQuery for this, due to time constraints I'm not going to be able to do it in pure JS.

我建议使用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
  });
});

See JSFiddle for working answer: https://jsfiddle.net/vvm4xe0m

请参阅JSFiddle的工作答案:https://jsfiddle.net/vvm4xe0m

#1