UI（Rails 4）をBootstrapからFoundation 5に移動しました。大画面用に通常のナビゲーションを追加し、小画面用にオフキャンバスナビゲーションを追加しました。詳細については、こちらをご覧ください：http：//foundation.zurb.com/docs/components/offcanvas.html
メニューをクリックすると、オフキャンバスナビゲーションにすべてのリンクが表示され、コンテンツをクリックしてナビゲーションを再度開くことができますが、ナビゲーション内のリンクをクリックすると、オフキャンバスナビゲーションを開くことができません。ブロックされているように、ブラウザのビューを手動で更新する必要があります。
これがそのための私のコードです：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : t('.siteTitle') %></title>
<%= stylesheet_link_tag 'application'%>
<%= javascript_include_tag 'vendor/modernizr' %>
<%= csrf_meta_tags %>
</head>
<body>
<!-- NAVIGATION Top Bar -->
<!------------------------>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div class="contain-to-grid sticky fixed">
<nav class="top-bar hide-for-small" data-topbar data-options="is_hover: false">
<ul class="title-area">
<li class="name">
<h1><%= link_to t('.siteTitle'), root_path, :id => 'newolu' %></h1>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown active">
<a href="#"><%=t('.menus')%></a>
<ul class="dropdown">
<li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#"><%=t('.changelanguage')%></a>
<ul class="dropdown">
<li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
<li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
</li>
</ul>
</section>
</nav>
</div>
<!-- NAVIGATION Offcanvas -->
<!-------------------------->
<div class="fixed show-for-small">
<nav class="tab-bar">
<section class="left tab-bar-section">
<h1 class="title"><%= t('.siteTitle') %></h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
</div>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label class="first">Newolu</label></li>
<li><<%= link_to 'Home', root_path, :id => 'newolu' %></li>
</ul>
<hr>
<ul class="off-canvas-list">
<li><label><%=t('.menus')%></label></li>
<li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
</ul>
<hr>
<ul class="off-canvas-list">
<li><label><%=t('.changelanguage')%></label></li>
<li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
<li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
</ul>
</aside>
<!-- Content -->
<!------------->
<section class="main-section">
<!-- Notice -->
<!------------>
<% if notice %>
<div data-alert class="alert-box info radius">
<p id="notice"><%= notice %></p>
<a href="#" class="close">×</a>
</div>
<% end %>
<!-- content goes here -->
<%= yield %>
</section>
<a class="exit-off-canvas" href="#"></a>
</div>
</div>
<%= javascript_include_tag 'application' %>
</body>
この問題が発生する理由を誰かが知っていますか？2番目の問題は、次のコードスニペットのテキストが左揃えではなく、中央に配置されていることです。右または真ん中に変更すると、同じ位置でプラスマイナスになります。
<section class="left tab-bar-section">
<h1 class="title"><%= t('.siteTitle') %></h1>
</section>
ここに画像があります：
誰かが助けてくれることを願っています..ありがとうございました
リンクを含むタグにdata-no-turbolinkフラグを追加すると、そのリンクのターボリンクが無効になり、フルリロードがトリガーされます。iOSでテストしました。ターボリンクの宝石全体を無効にする必要はありません。<div data-no-turbolink><a href="/link"></a></div>これでうまくいくはずです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加