javascript - 如何更改除第一个面板之外的面板电流？

Question

我创建了一个网站并有一个面板。我网站的一部分:

<div class="block">
    <div class="block-title">
        <h1>Open/close div tag's</h1>
        <h2>Some junior's magic</h2>
    </div>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseOne" onclick="openbox('panel1'); return false">Donec quis dui at dolor tempor<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel1" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseTwo" onclick="openbox('panel2'); return false">Vivamus molestie gravida turpis<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel2" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseThree" onclick="openbox('panel3'); return false">Fusce lobortis lorem at ipsum semper<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel3" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseFour" onclick="openbox('panel4'); return false">Nam convallis pellentesque nisl<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel4" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
    </div>
</div>

我正在编写一个 JavaScript 脚本，它每次打开此面板之一并将“+”符号更改为“-”。

这是我的 JavaScript 代码。

function openbox(id){ 
  var element = document.getElementById(id);
  display = element.style.display;

  if(display=='none'){ 
      element.style.display='block';
      ver elem = document.getElementById('panel1');
      document.getElementsById('open-icon').innerHTML = '-';
  }
  else{
      document.getElementById(id).style.display='none'; 
      document.getElementById('open-icon').innerHTML = '+';
  }
}

当我单击第一个面板时，它工作正常。但是，如果我单击另一个，div 打开，但第一个面板上的“+”号发生了变化。示例:

最后一个麻烦:我想一次只打开一个面板并自动关闭其他面板(如果我打开 2 个面板并仅关闭一个面板，则第一个面板上的“-”号将更改为“+”)。但我不明白该怎么做。这里的问题是:

Answer 1

您需要使用this，例如open(this, 'panel1')找到点击 anchor 的子项并更改innerHTML

function openbox(e, id) {
  var element = document.getElementById(id),
    display = element.style.display;
  var activePanel = document.querySelector('.active-panel'),
    activeToggle = document.querySelector('.active-toggle');
  if(activePanel) {
    activePanel.style.display = 'none';
    activePanel.classList.remove('active-panel');
    activeToggle.classList.remove('active-toggle');
    activeToggle.children[0].innerHTML = '+';
  }
  if(display == 'none') { 
    element.style.display = 'block';
    element.classList.toggle('active-panel');    
    e.children[0].innerHTML = '-';
    e.classList.toggle('active-toggle');
  } else {
    element.style.display = 'none';
    element.classList.toggle('active-panel');
    e.children[0].innerHTML = '+';
    e.classList.toggle('active-toggle');
  }
}

.accordion-toggle {
 background: #000;
 padding: 10px;
 display: block;
 color: #fff;
 text-decoration: none;
 position: relative;
}
.accordion-toggle span {
 background: #1f91dc;
 position: absolute;
 top: 0;
 right: 0;
 padding: 10px 15px;
}

<div class="block">
    <div class="block-title">
        <h1>Open/close div tag's</h1>
        <h2>Some junior's magic</h2>
    </div>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseOne" onclick="openbox(this, 'panel1'); return false">Donec quis dui at dolor tempor<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel1" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseTwo" onclick="openbox(this, 'panel2'); return false">Vivamus molestie gravida turpis<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel2" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseThree" onclick="openbox(this, 'panel3'); return false">Fusce lobortis lorem at ipsum semper<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel3" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseFour" onclick="openbox(this, 'panel4'); return false">Nam convallis pellentesque nisl<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel4" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
    </div>
</div>