Javascript - Установить текст, когда аккордеон разворачивается / разрушается - PullRequest
Новая
       4

Javascript - Установить текст, когда аккордеон разворачивается / разрушается

0 голосов
/ 23 марта 2012

У меня есть меню JavaScript типа гармошки. Я хочу иметь индикатор перед заголовками разделов меню, который показывает (+), когда раздел свернут, и (-), когда он развернут. Основываясь на приведенном ниже коде, я смог это сделать, однако индикатор изменяется только по щелчку и не устанавливается в зависимости от того, развернут ли раздел или свернут. Я смотрю на это уже несколько часов и буду признателен за любые дополнительные глаза, которые могут быть в состоянии выяснить логику, которая ускользает от меня.

Вот 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>

1 Ответ

1 голос
/ 23 марта 2012

Что вам нужно сделать, это установить все индикаторы на «+» в методе changeText, прежде чем делать что-либо еще.Добавьте следующий код перед оператором if в методе changeText: 

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;
}
...