Javascript складное меню (скрыть другие элементы)

Question

У меня есть следующий рабочий функцию JavaScript:

function collapsible(zap) { 
     if (document.getElementById) { 
      var abra = document.getElementById(zap).style; 
      if (abra.display == "block") { 
       abra.display = "none"; 
      } else { 
       abra.display = "block"; 
      } 
      return false; 
     } else { 
      return true; 
     } 
} 

Когда я использую следующее в HTML коде отображает или скрывает «элемент» DIV:

<li><a href="#" onclick="return collapsible('element');">Element</a></li> 

Thats работает отлично. Но проблема в том, что я хочу использовать функцию для нескольких ссылок, а затем другие элементы, которые были нажаты до, остаются, открываются.

Как перепрограммировать код, чтобы только один div оставался открытым, а другой закрывался, если я нажимаю на другую ссылку?

Спасибо заранее!

Answer 1

Если вы могли бы использовать jQuery и, что более важно, jQueryUI accordion Я думаю, что он выполнит именно то, что вы ищете.

Однако, не используя эти два, вот как бы я его структурировал. Как упоминалось выше, я бы использовал классы для изменения стилей разделов, которые вы хотите показать или скрытых. Затем js-код может просто переключать эти классы на каждый из ваших элементов. Немного более сложная часть (без jquery) изменяет значения класса, так как в вашем конечном приложении у вас может быть много классов для каждого div. Это всего лишь очень грубый пример, который заставит вас идти.

Working JSFiddle Example

Пример DOM

<div > 
    <li><a href="#" onclick="return collapsible('elem1');">Element1</a></li> 
    <div id='elem1' class='myelem visible'> 
     Element 1 contents 
</div> 
</div> 
<div > 
    <li><a href="#" onclick="return collapsible('elem2');">Element2</a></li> 
    <div id='elem2' class='myelem'> 
     Element 2 contents 
    </div> 
</div> 
<div > 
    <li><a href="#" onclick="return collapsible('elem3');">Element3</a></li> 
    <div id='elem3' class='myelem'> 
     Element 3 contents 
    </div> 
</div> 

Образец JS

window['collapsible'] = function(zap) { 
    if (document.getElementById) 
    { 
     var visDivs = document.getElementsByClassName('visible'); 
     for(var i = 0; i < visDivs.length; i++) 
     { 
      visDivs[i].className = visDivs[i].className.replace('visible',''); 
     } 
     document.getElementById(zap).className += " visible"; 
     return false; 
    } 
    else 
     return true; 
} 

Пример CSS:

.myelem { 
    display: none; 
} 
.visible { 
    display: block; 
} 

Answer 2

. Чтобы создать класс (или, возможно, два), такой как складной и активный или открытый, который имеет этот стиль (display: block или none), а затем вы работаете над добавлением или удалением класса.

Логика будет:

Ссылки, имеет класс разборную при нажатии добавит активный или открытый класс, который дал бы поведение, которое остается открывает (или активный) с помощью CSS.

Если вы хотите скрыть другие элементы, вы должны искать элементы с классом разборки, а затем удалить активный (или открытый) класс, если он есть.

Answer 3

Вот мое решение: http://jsfiddle.net/g5oc0uoq/

$('.content').hide(); 
$('.listelement').on('click', function(){ 
    if(!($(this).children('.content').is(':visible'))){ 
    $('.content').slideUp(); 
    $(this).children('.content').slideDown(); 
    } else { 
    $('.content').slideUp(); 
    } 
}); 

В случае возникновения проблем с производительностью вместо slideUp() и slideDown() можно использовать show() и hide().