Выпадающее меню не работает

Question

Я пытаюсь установить меню выпадающего меню внутри среды ссылок: (Также я прочитал, что с HTML5 можно спокойно «окружить» вокруг div. Любые мысли?)

  <a href=""> 
       <div id="foo"> 
        <select> 
         <option value="a">Stuff</option> 
         <option value="b">More stuff</option> 
        </select> 
       </div> 
      </a> 

во всяком случае, по крайней мере, в Chrome это не работает правильно: Если открыть меню, среда нажатия на ссылку и страница обновляется. В IE это работает так, как я этого хочу. Я попробовал z-index, но это не работает для Chrome.

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

Леннарт

Answer 1

два метода, оба довольно просто.

1. Уберите href="" часть элемента <a>. Это то, что отправляет запрос обратной передачи и обновляет страницу.
2. Если вы хотите сохранить ссылку по любой причине. Сделайте событие click false false. Добавьте это в <a> тег: onclick="return false;".

Как так:

<a href="" onclick="return false;"> 
 
    <div id="foo"> 
 
    <select> 
 
     <option value="a">Stuff</option> 
 
     <option value="b">More stuff</option> 
 
    </select> 
 
    </div> 
 
</a>

Если вы хотите автоматизировать второй метод, вы можете добавить некоторые JavaScript:

var dropdownlink = document.getElementsByTagName("a"); 
 

 
for (var i = 0; i < dropdownlink.length; i++) { 
 
    if (dropdownlink[i].getElementsByTagName("select").length > 0) { 
 
    dropdownlink[i].onclick = function() { 
 
     return false; 
 
    }; 
 
    } 
 
}

<a href="k"> 
 
    <div id="foo"> 
 
    <select> 
 
     <option value="a">Stuff</option> 
 
     <option value="b">More stuff</option> 
 
    </select> 
 
    </div> 
 
</a> 
 

 
<a href="">Test Link</a>