Mozilla Firefox에서 Foundation 아코디언 패널의 요소 선택이 깨졌습니다.

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에서는 첫 번째 클릭으로 선택 메뉴가 확장되지만 항목을 선택하려고 다시 클릭하면 초점이 사라지고 아무것도 선택되지 않으며 선택 버튼을 다시 클릭할 수 없습니다.

클릭 버블링과 관련이 있을 수도 있다고 생각했지만 event.stopPropagation() 그리고 event.preventDefault() 선택 요소와 옵션 요소 모두에서 아무것도 변경되지 않았습니다.

편집하다 --http://jsfiddle.net/V7bTH/4/ 이 Jsfiddle은 Chrome에서 잘 작동하지만 Firefox에서는 실패합니다.(어떤 이유로 jsfiddle에서 작동하는 원래 Foundation 5 코드를 얻을 수 없었지만 여기에는 다른 코드와 동일한 문제가 있습니다)

Answer 1

문제:사용 select 내부에 a 은 HTML이 아닙니다. 왜냐하면 a 인라인 요소입니다.만약 당신이 이것에 가면 간단한 바이올린 http://jsfiddle.net/3bt8Q/ Firefox에서도 같은 이유로 작동하지 않지만 Chrome에서는 명시적으로 처리하지만 올바른 HTML이 아니기 때문에 Chrome에서는 작동합니다.

해결책:컨테이너를 다른 용도로 사용해야 합니다. a 또는 절대 위치 요소를 사용하십시오.

데모 - 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;
}