Пользовательский выпадающий

Question

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

function toggle() {
 var ele = document.getElementById("dropdown-items");
 var text = document.getElementById("dropdown-menu");
 if(ele.style.display == "block") {
      ele.style.display = "none";
   }
 else {
  ele.style.display = "block";
 }
}

HTML выглядит так:

 <div id="mainSearch">
            <div id="search-cat">
                <div class="search-title">Destination</div>
                    <div id="cat-dropdown">
                    <a id="dropdown-menu" href="javascript:toggle();">Choose a Category...</a>
                    <div id="dropdown-items">
                        <ul>        
                                <li id="dropdown-list"><a href="">Category One</a></li> 
                                <li id="dropdown-list"><a href="">Category Two</a></li>
                                <li id="dropdown-list"><a href="">Category Three</a></li>   
                        </ul>
                    </div>
                </div>
            </div>

            <div id="search-cat">
                <div class="search-title">Location</div>
                    <div id="cat-dropdown">
                    <a id="dropdown-menu" href="javascript:toggle();">Choose a Location...</a>
                    <div id="dropdown-items">
                        <ul>        
                                <li id="dropdown-list"><a href="">Category One</a></li> 
                                <li id="dropdown-list"><a href="">Category Two</a></li>
                                <li id="dropdown-list"><a href="">Category Three</a></li>   
                        </ul>
                    </div>
                </div>
            </div>
        </div>

Answer 1

Я предполагаю, что это потому, что вы ссылаетесь на выпадающий список по идентификатору, и я предполагаю, что все ваши идентификаторы совпадают?

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

Пожалуйста, оставьте немного HTML, если вы хотите более краткий ответ:)

Если бы вы адаптировали свою функцию так, чтобы идентификатор элемента мог быть передан в качестве параметра, это решило бы вашу проблему.

Answer 2

Сделайте так, чтобы ваша функция взяла идентификатор и передала идентификатор элемента для определенного меню:

function toggle(menuId) {
 var ele = document.getElementById(menuId);
 if(ele.style.display == "block") {
      ele.style.display = "none";
   }
 else {
  ele.style.display = "block";
 }
}

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

РЕДАКТИРОВАТЬ

Вам не нужно много другого JavaScript здесь.Для каждого выпадающего меню вам просто нужно слегка изменить href:

<a id="dropdown-menu1" href="javascript:toggle('dropdown-menu1');">Choose a Category...</a>

<a id="dropdown-menu2" href="javascript:toggle('dropdown-menu2');">Choose a Category...</a>

Вызов toggle с идентификатором меню означает, что вышеупомянутая измененная функция toggle переключит точное меню, которое вы хотите.

Answer 3

Вы получаете доступ к раскрывающемуся списку по идентификатору, и идентификаторы должны быть уникальными на странице HTML. Без дополнительной информации, я думаю, что ваша проблема здесь.

Answer 4

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

function toggle(var1) { var ele = document.getElementById(var1);