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中，第一次单击将展开选择菜单，但是当您尝试再次单击以选择项目时，它将失去焦点，未选择任何内容，并且您无法再次单击选择按钮。

我认为这可能与点击冒泡有关，但我尝试在select和option元素上使用event.stopPropagation()和event.preventDefault()并没有改变任何内容。

编辑 - http://jsfiddle.net/V7bTH/4/ 这个Jsfiddle在Chrome中效果很好，在Firefox中失败了。（由于某些原因，我无法让我的原始基础5代码在jsfiddle中运行，但是这里有一些不同代码的相同问题）

Answer 1

问题：在select内使用a不正确，因为a是内联元素。如果你去看这个简单小提琴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;
}

在Mozilla Firefox中打破的Foundation accordion面板上选择元素

1 个答案: