IOS Chrome手风琴打开/折叠

时间:2015-10-01 13:10:36

标签: html ios css google-chrome

使用这款CSS手风琴适用于除IOS上的谷歌浏览器以外的所有浏览器。

JS Fiddle

知道在IOS上调试chrome并不简单,是否有人有解决方案或修复方法让手风琴再次工作。

HTML

<section id="accordion">
<div>
    <input id="check-1" type="checkbox" href="check-1" />
    <label for="check-1">1914 translation by H. Rackham</label>
    <article>
        <p>
            <div class="row">
                <div class="one-half column">
                    <img class="alignright" src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="module 1">
                </div>
                <div class="one-half column">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
                </div>
            </div>
        </p>
    </article>
</div>
<div>
    <input id="check-2" type="checkbox" />
    <label for="check-2"> <strong>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</strong>
<small>(click for more details)</small>

    </label>
    <article>
        <p>
            <div class="row">
                <div class="one-half column">
                    <img class="alignright" src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="module 2">
                </div>
                <div class="one-half column">
                  <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
                </div>
            </div>
        </p>
    </article>
</div>

JS Fiddle链接中包含的CSS。

由于

0 个答案:

没有答案