Mozilla Firefox에서 Foundation 아코디언 패널의 요소 선택이 깨졌습니다.
-
21-12-2019 - |
문제
이로 인해 몇 시간 동안 당황했고 어떻게 해야 할지 모르겠습니다.
다음과 같이 아코디언 패널 내에 선택 메뉴가 중첩된 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 코드를 얻을 수 없었지만 여기에는 다른 코드와 동일한 문제가 있습니다)
해결책
문제:사용 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;
}