2014年5月18日日曜日

[Bootstrap]collapseでクリックしたらdata-targetではなくhrefを使うべし。

※Bootstrap 3.1.1のお話。

まず、http://getbootstrap.com/javascript/#collapseでは、以下のように説明されていて、開閉したい要素のidをdata-targetで指定するように書いてある。
たとえば data-target="#demo" といったような感じだ。

Via data attributes
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional classin.

しかし、iphone5cで試すと、開閉しない。

クリック(iphoneだとtap)する要素がbuttonタグの場合や、classに.btnなどがついている場合、type="button"がついている場合は開閉する。しかし、ただのaタグの場合は開閉しない。

aタグでtype="button"やclass="btn"をつけたくない場合は、data-target="#demo"ではなく、href="#demo"をつけるとうまく動く。
両方つけてしまうと、対象の#demoが画面トップにくようスクロールしてしまう。



0 件のコメント:

コメントを投稿