Выберите элемент на фундаментной панели Accordion, сломанной в Mozilla Firefox

Question

Это намазало меня в течение нескольких часов, и я не уверен, что делать.

У меня есть код по умолчанию для аккордеона ZURB-Foundation с помощью меню выбора, вложенного на панели «Аккордеосион», как таковой:

<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>

.

Вышесказанное работает нормально в Chrome.В Firefox, однако, первый щелчок расширит меню «Выбрать», но при попытке попробовать еще раз, чтобы выбрать элемент, который он теряет фокус, ничего не выбрано, и вы не можете снова нажать кнопку «Выбрать».

Я думал, что это возможно, придется сделать с bubling, но мои попытки использовать event.stopPropagation() и event.preventDefault() как на элементах SELECT, так и на параметрах ничего не изменили.

Редактировать - http://jsfiddle.net/v7bth/4/ Это Jsfiddle работает отлично в Chrome, не удается в Firefox. (Я не мог получить свой оригинальный фонд 5 код, работающий в jsfiddle по какой-то причине, но вот такая же проблема с другим кодом)

Answer 1

<Сильная> проблема : использование select внутри a не имеет правый HTML, потому что a является встроенным элементом.Если вы перейдете к этому Simple Diddle http://jsfiddle.net/3bt8q/ Это также не будет работать по той же причине в Firefox, но это работает в Chrome, потому что Chrome обрабатывает его прямо, но не правый HTML

Решение : Вы должны использовать контейнер, чтобы быть рядом, чем a или просто используйте абсолютный позиционированный элемент

demo - 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;
}

.