Скрыть/Показать div в списке

У меня есть список с произвольным количеством элементов. Каждый элемент имеет ряд действий, которые могут быть выполнены на нем. Я хочу показать эти действия в div, который появляется, когда пользователь нажимает ссылку, связанную с конкретным элементом списка.Скрыть/Показать div в списке

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

<script language="javascript"> 
function toggleOptions() { 
     var ele = this; 
     var text = this.parentNode.getElementsByClassName("displayOptions"); 


    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    text.innerHTML = "TESTING"; 
    } 
    else { 
    ele.style.display = "block"; 
    text.innerHTML = "Hide GPS"; 
    } 
}

ВОТ HTML. Список может быть бесконечным, но это всего лишь отрывок из списка.

 <a href="javascript:toggleOptions();"> 
     ITEM 1 OPTIONS 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 1 OPTIONS 
    </div> 

    <a href="javascript:toggleOptions();"> 
     ITEM 2 OPTIONS 
    </a> 
    <div class="toggleOptions" style="display: none"> 
     ITEM 2 OPTIONS 
    </div> 

    <a href="javascript:toggleOptions();"> 
     ITEM 3 OPTIONS 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 2 OPTIONS 
    </div>

источник

2012-12-05 Die 20

Можете ли вы показать нам, что HTML выглядит? – Stegrex

убедитесь, что это действительно то, что вы хотите ** document.getElementById («.goggOptions»); ** .. это выглядит для меня, поскольку вы хотите получить элемент с классом toggleOptions ... иначе используйте document.getElementsByClass ('toggleOptions '), но это всегда будет массив, поэтому вам нужно выбрать тот, который вы хотите – Mik

Stegrex, я только что обновил свой код с помощью HTML. Mik, я действительно хочу использовать классы, и я пробовал его с ClassName, но он не показывал/скрывал какие-либо скрытые div. –

Поместите еще один div или что-то вокруг каждой группы: ... поставьте функцию toggleOptions() в onclick и передайте href a #, чтобы она не была пустой ... pass toggleOptions (this), чтобы узнать, какой элемент щелкнул

<div> 
    <a href="#" onclick="toggleOptions(this);" style="display:block;"> 
     SHOW 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 1 OPTIONS 
    </div> 
</div> 
<div> 
    <a href="#" onclick="toggleOptions(this);" style="display:block;"> 
     SHOW 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 2 OPTIONS 
    </div> 
</div> 
<div> 
    <a href="#" onclick="toggleOptions(this);" style="display:block;"> 
     SHOW 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 3 OPTIONS 
    </div> 
</div>

попробовать с этим здесь http://jsfiddle.net/YE6XZ/1/

function toggleOptions(e) { 
    var ele = e; 
    var text = e.parentElement.querySelector('.toggleOptions') 

if(text.style.display == "none") { 
    //ele.style.display = "none"; 
    text.style.display = "block"; 
    text.innerHTML = "TESTING"; 
    ele.innerHTML = "hide"; 
} 
else { 
    text.style.display = "none"; 
    //text.innerHTML = "Hide GPS"; 
    ele.innerHTML = "show"; 
} 

return false;

}

источник

2012-12-05 19:51:21 Mik

Mik I обновил исходный код с предложенными вами изменениями. Кажется, он все еще работает. –

Вы попробовали новую версию ..? вы можете проверить это в ссылке jsfiddle – Mik

Mik, Nice man! Однако как мне получить ссылку, чтобы она отображалась, когда отображается div toggleOptions? Причина: Я хотел бы использовать ссылку, чтобы показать/скрыть div toggleOptions. –

.toggleOptions не является допустимым значением атрибута id DOM. Вы пытаетесь получить элемент по его имени класса? Затем вы должны использовать getElementsByClassName или удалить ведущую точку в литерале.

источник

2012-12-05 19:41:32

Скрыть/Показать div в списке

ответ

Смежные вопросы