web-dev-qa-db-ja.com

Bootstrap折りたたまれたメニューリンクがモバイルデバイスで機能しない

ナビゲーションバーのサブメニューアイテムを含む折りたたみ可能なメニューを使用しています。狭いディスプレイではメニューが適切に折りたたまれ、サブメニュー項目が適切に表示されます。

しかし、モバイルデバイスでサブメニュー項目をクリックすると、リンクが機能しません。代わりに、サブメニューが折りたたまれ、折りたたまれたメニューのトップメニュー項目が強調表示されます。まるで、サブメニューが開かれず、「クリック」がその下にある要素に移動したかのようです。

デスクトップブラウザでページをテストすると、すべてが正しく動作します。

私はいくつかのbootstrapスタイルをカスタマイズしましたが、ほとんどが色などです。

何か案は？ TIA。

javascriptcsstwitter-bootstrapresponsive-design
16
isapir

これはBootstrap（ https://github.com/Twitter/bootstrap/issues/455 および https： //github.com/Twitter/bootstrap/issues/7968 ）これは、長期間オープンしていて修正されていないため、非常に残念です。Bootsrtapを使用する主な理由は、レスポンシブデザインの可能性です。

https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8 で提案された修正は機能しているようですが、Bootstrapソースコードを使用しているため、縮小版を使用していて、外観が異なるソーススクリプトを使用していない。

私の場合、縮小版でタッチストリングテストに「disable-」というサブストリングを追加して、この機能を無効にすることで修正しました。

縮小したbootstrap.min.jsファイルでそれを行うには、サブストリングを見つけます

"ontouchstart"

そしてそれを

"disable-ontouchstart"

助けてくれてありがとう@Shmalzy.

40
isapir

IPadでこの問題が発生しました。アンカータグに次のものが含まれていないことがわかりました。

 href="#collapseSection"

#collapseSectionは折りたたみパネルのIDです。例：

<div class="panel panel-default">
  <div class="panel-heading"><a class="accordion-toggle" href="#collapseHelp" data-toggle="collapse" data-target="#collapseHelp" data-parent="#accordion">Printing Problems?</a></div>
  <div id="collapseHelp" class="panel-collapse collapse">
    <div class="panel-body">Before you contact the helpdesk, have a look at <a href="Help.asp?PrintHelp">our help system</a>.</div>
  </div>
</div>

Bootstrapの例では問題なく機能するため、この問題を修正するにはnot縮小JavaScriptを変更する必要があります。それはすべて、HTMLを正しくフォーマットすることの問題です。

2
Witchfinder

私はBootstrapナビゲーションまたはメニューとしてではなく、折りたたみ可能なパネル（このような ）で折りたたみ可能なパネルを試しましたhttp://www.w3schools.com/bootstrap /bootstrap_collapse.asp ）、同じ問題が発生しました。

少なくとも私の電話では、<a...>を<button...>に変更すると役立つことに気付きました（この例では実際にbuttonも使用しています）。次に、ボタンのスタイルをリンクのように見せることができます。実際には、これを行うBootstrap btn-linkと呼ばれるCSSクラスがあります。または、独自の凝ったスタイルを追加できます。私のユースケースは、最も簡単で最も簡単なソリューションでした。

0
mmona

早くて汚いことをしなければならなかったので、「昔」のやり方を使いました。
リンクを提供しました：<a style="position:relative;z-index:1000" ...

0
Itay Moav -Malimovka

メニュー項目リストが長すぎる場合、モバイルブラウザー（iOSでテスト済み）で完全なメニューを表示するには、CSSに次のコードを追加する必要がある場合があります。

@media (max-width: 1023px) {
.nav-collapse {
    overflow-y: auto;
}
}
0
Camaleo

私は同じ問題を抱えていました、この修正は私のために働きました：

https://github.com/stevecoug/bootstrap/commit/b2a23b222fd05fa824ed05fb096971321ad3dba1

0
Registered Alias