Question

我有一个JavaScript手风琴类型菜单。我想在菜单部分标题前面有一个指示符，显示（+）部分折叠时和（ - ）展开时。基于下面的代码，我已经能够这样做，但是指标仅在点击时发生变化，而不是根据部分是展开还是折叠来设置。我现在已经看了几个小时，并且会感激任何额外的眼睛，这些眼睛可能能够找出逃避我的逻辑。

Here's a JSFiddle (Click Me)
这是Javascript：

var ContentHeight;
var TimeToSlide = 250.0;
var opening;
var openAccordion = '';

function runAccordion(index, height)
{
  ContentHeight = height;
  var nID = "Accordion" + index + "Content";
  if(openAccordion == nID)
    nID = '';

  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" 
      + openAccordion + "','" + nID + "')", 33);

  openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;

  opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);

  if(timeLeft <= elapsedTicks)
  {
    if(opening != null)
      opening.style.height = ContentHeight + 'px';

    if(closing != null)
    {
      closing.style.display = 'none';
      closing.style.height = '0px';
    }
    return;
  }

  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

  if(opening != null)
  {
    if(opening.style.display != 'block')
      opening.style.display = 'block';
    opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }

  if(closing != null)
    closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'" 
      + closingId + "','" + openingId + "')", 33);
}
function changeText(index){

    var accordionID = "Accordion" + index + "Content";
    var indicatorID = document.getElementById("expandIndicator" + index);
    var currentIndicator = indicatorID.innerHTML;
    var openIndicator = "(+)";
    var closedIndicator = "(-)";

    if (currentIndicator == openIndicator) {
        indicatorID.innerHTML = closedIndicator; }
    else {
        indicatorID.innerHTML = openIndicator; }
}

这是HTML / CSS：

<style type="text/css">
    #container {
        padding-top:5px;
    }

    .stepHeader, .AccordionContent, .AccordionContainer
    {
      position:relative;
      width:735px;
    }

    .stepHeader
    {
      /*height:25px;*/
      overflow:hidden;
      cursor:pointer;
      color:black;
      font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      text-transform:uppercase;
      vertical-align:middle;
      text-align:left;
      display:table-cell;
      -moz-user-select:none;
      border-bottom:solid #FFFFFF;
      padding:5px;
    }

    #step1 {
      background-color:#FF7F32;
    }

    #step2 {
      background-color:#ff8a43;
    }

    #step3 {
      background-color:#ff9454;
    }

    #step4 {
      background-color:#ff9f65;
    }

    #step5 {
      background-color:#ffa976;
    }

    #step6 {
      background-color:#ffa976;
    }

    .AccordionContent
    {
      height:0px;
      overflow:auto;
      display:none; 
      background-color:#f8f8f0;
    }

    .AccordionContainer
    {
        padding:0 0px 0 5px;
    }

    .expandIndicator {  
        width:15px;
        display:inline;
        margin-right:5px;
    }

    .stepTitle {
        width:400px;
        display:inline;
    }
</style>

<div id="container">
            <div id="AccordionContainer" class="AccordionContainer">

              <div onclick="runAccordion(1,100);">
                <div class="stepHeader" id="step1" onselectstart="return false;" onclick="changeText(1)">
                  <div id="expandIndicator1" class="expandIndicator">(+)</div> 
                  <div class="stepTitle">Step 1</div>
                </div>
              </div>
              <div id="Accordion1Content" class="AccordionContent">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>

              <div onclick="runAccordion(2,100);">
                <div class="stepHeader" id="step2" onselectstart="return false;" onclick='changeText(2)'>
                  <div id="expandIndicator2" class="expandIndicator">(+)</div>
                  <div class="stepTitle">Step 2</div>
                </div>
              </div>
              <div id="Accordion2Content" class="AccordionContent">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>

              <div onclick="runAccordion(3,100);">
                <div class="stepHeader" id="step3" onselectstart="return false;" onclick='changeText(3)'>
                  <div id="expandIndicator3" class="expandIndicator">(+)</div>
                  <div class="stepTitle">Step 3</div>
                </div>
              </div>
              <div id="Accordion3Content" class="AccordionContent">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </div>
</div>

Answer 1

您需要做的是在执行任何其他操作之前将所有指示符设置为changeText方法中的“+”。在changeText方法中的if语句之前添加以下代码：

document.getElementById("expandIndicator1").innerHTML = openIndicator; document.getElementById("expandIndicator2").innerHTML = openIndicator; document.getElementById("expandIndicator3").innerHTML = openIndicator;

或者，如果您有太多内容div：

var numberOfContentDivs = 36; for ( var i = 1; i <= numberOfContentDivs; i++) { document.getElementById("expandIndicator" + i).innerHTML = openIndicator; }

Javascript - 当手风琴扩展/折叠时设置文本

1 个答案: