حدد العنصر الأساس الأكورديون لوحة مكسورة في موزيلا فايرفوكس

Question

هذا وقد حيرني لبضع ساعات و أنا غير متأكد ما يجب القيام به.

لدي الافتراضي رمز zurb-مؤسسة الأكورديون مع تحديد القائمة المتداخلة داخل لوحة الأكورديون, على هذا النحو:

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

أعلاه يعمل بشكل جيد في كروم.في فايرفوكس ، ومع ذلك ، فإن أول انقر فوق توسيع اختر القائمة ، ولكن عند محاولة انقر مرة أخرى لتحديد عنصر يفقد التركيز ، تحديد أي شيء, و لا يمكنك انقر فوق حدد الزر مرة أخرى.

اعتقد انها قد تضطر الى القيام به مع انقر فوق السطح ، ولكن محاولاتي استخدام event.stopPropagation() و event.preventDefault() على كل من حدد الخيار عناصر لم يتغير أي شيء.

تحرير - http://jsfiddle.net/V7bTH/4/ هذا Jsfiddle يعمل كبيرة في كروم ، فشل في فايرفوكس.(لم أتمكن من الحصول على بلدي الأصلي مؤسسة 5 قانون العمل في jsfiddle لسبب ما ، ولكن هنا نفس المشكلة w/ بعض الرموز مختلفة)

Answer 1

المشكلة:استخدام select داخل a ليس صحيحا لأن HTML a هي مضمنة عنصر.إذا ذهبت إلى هذا بسيطة كمان http://jsfiddle.net/3bt8Q/ فإنه لن يعمل أيضا لنفس السبب في فايرفوكس, لكنه يعمل في كروم لأن الكروم مقابض صراحة ولكن ليس من حق 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;
}