Sélectionner l'élément sur la Fondation de l'accordéon panneau cassé dans Mozilla Firefox

Question

Ce qui a déconcerté moi pour quelques heures et je ne suis pas sûr de quoi faire.

J'ai le code par défaut pour un zurb-fondation de l'accordéon avec un menu select imbriqué dans le panneau accordéon, comme tel:

<dl class="accordion" data-accordion>
  <dd>
    <a href="#panel1">Accordion 1. 
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </a>
    <div id="panel1" class="content active">
      Content ... 
    </div>
  </dd>
  <dd>
    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">
      Content .. 
    </div>
  </dd>
</dl>

Le ci-dessus fonctionne très bien dans Chrome.Dans Firefox, cependant, le premier clic développez le menu select, mais lorsque vous essayez et cliquez à nouveau pour sélectionner un élément perd le focus, rien n'est sélectionné, et que vous ne pouvez pas cliquez sur le bouton sélectionner de nouveau.

J'ai pensé qu'il pourrait avoir à faire avec cliquez sur la formation de bulles, mais mes tentatives d'utilisation event.stopPropagation() et event.preventDefault() sur le et sélectionnez l'option éléments n'ont pas changé quoi que ce soit.

EDIT -- http://jsfiddle.net/V7bTH/4/ Cette Jsfiddle fonctionne très bien dans Chrome, échoue dans Firefox.(Je ne pouvais pas obtenir ma fondation d'origine 5 du code de travail dans jsfiddle pour une raison quelconque, mais ici, c'est le même problème w/ certains de code différent)

Answer 1

Problème:L'utilisation de select à l'intérieur de a n'est pas droit HTML car a est un élément inline.si vous allez à ce simple violon http://jsfiddle.net/3bt8Q/ il ne fonctionnera pas pour la même raison, dans firefox, mais il fonctionne dans chrome parce que chrome gère explicitement, mais son droit de ne pas html

Solution:Vous devez utiliser le conteneur autre que a ou simplement l'utiliser absolue positionné élément

DÉMO - http://jsfiddle.net/V7bTH/6/

html

<div class="row">
    <div class="large-12 columns">
        <h2>Accordion</h2>
        <div class="section-container accordion" data-section="accordion">

            <section class="qw">
                <select id="select">
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                          </select>
                <p class="title">

                    <a href="#tab-1">Tab 1

                    </a></p>
                <div class="content" data-slug="tab-1">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
            <section>
                <p class="title"><a href="#tab-2">Tab 2</a></p>
                <div class="content" data-slug="tab-2">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
            <section>
                <p class="title"><a href="#tab-3">Tab 3</a></p>
                <div class="content" data-slug="tab-3">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
        </div>
    </div>
</div>

css

.qw{
 position: relative;
}
#select{
    width:100px;
    position: absolute;
    top: 10px;
    left: 100px;
}