简单导航未在Rails 3上使用引导程序显示嵌套项目

时间:2013-10-17 04:04:56

标签: ruby-on-rails twitter-bootstrap twitter-bootstrap-3

我尝试嵌套我的菜单项,因为它无法显示。

要点https://gist.github.com/poc7667/7019484

它应该在我的菜单中显示两个net.item。但它没有。

我猜问题是由于我必须在输出html中做一些css,但是如何?

primary.item :urltests, 'Network/Documentation', root_path  do |net_docs|

  net_docs.item :net, "URL Command", welcome_af_form_path do |net|        
    net.item :vvtk, "VIVOTEK", urltests_path
    net.item :sony, "SONY", sony_url_command_automation_tests_path
  end

  # net_docs.item :div, "Translate Strings", :class => 'dropdown-header'
  # net_docs.item :div, "divider" , :class => 'divider'
  # net_docs.item :trans_db, 'Firmware', translates_path
end

这里看起来

enter image description here

这是我的捆绑列表

Gems included by the bundle:
  * actionmailer (3.2.12)
  * actionpack (3.2.12)
  * activemodel (3.2.12)
  * activerecord (3.2.12)
  * activeresource (3.2.12)
  * activesupport (3.2.12)
  * arel (3.0.2)
  * atomic (1.1.14)
  * awesome_print (1.1.0)
  * bcrypt-ruby (3.1.2)
  * bootstrap-sass (2.3.2.2)
  * builder (3.0.4)
  * bundler (1.3.5)
  * cancan (1.6.10)
  * carrierwave (0.9.0)
  * celluloid (0.15.1)
  * coffee-rails (3.2.2)
  * coffee-script (2.2.0)
  * coffee-script-source (1.6.3)
  * connection_pool (1.1.0)
  * devise (3.1.1)
  * erubis (2.7.0)
  * execjs (2.0.1)
  * haml (4.0.3)
  * hike (1.2.3)
  * hirb (0.7.1)
  * hirb-unicode (0.0.5)
  * i18n (0.6.5)
  * journey (1.0.4)
  * jquery-datatables-rails (1.11.2 494f752)
  * jquery-rails (3.0.4)
  * jquery-ui-rails (4.0.4)
  * json (1.8.0)
  * mail (2.4.4)
  * mime-types (1.25)
  * mini_portile (0.5.1)
  * multi_json (1.8.0)
  * nokogiri (1.6.0)
  * orm_adapter (0.4.0)
  * pg (0.17.0)
  * polyglot (0.3.3)
  * quiet_assets (1.0.2)
  * rack (1.4.5)
  * rack-cache (1.2)
  * rack-ssl (1.3.3)
  * rack-test (0.6.2)
  * rails (3.2.12)
  * railties (3.2.12)
  * rake (10.1.0)
  * rdoc (3.12.2)
  * redis (3.0.4)
  * redis-namespace (1.3.1)
  * rest-client (1.6.7)
  * sass (3.2.10)
  * sass-rails (3.2.6)
  * sequel (3.20.0)
  * sidekiq (2.14.0)
  * simple-navigation (3.11.0)
  * simple-navigation-bootstrap (1.0.0)
  * sinatra (1.0)
  * sprockets (2.2.2)
  * sqlite3 (1.3.8)
  * taps (0.3.24)
  * thor (0.18.1)
  * thread_safe (0.1.3)
  * tilt (1.4.1)
  * timers (1.1.0)
  * tinymce-rails (4.0.2)
  * tlsmail (0.0.1)
  * treetop (1.4.15)
  * twitter-bootstrap-rails (2.2.8 40ffd56)
  * tzinfo (0.3.37)
  * uglifier (2.2.1)
  * unicode-display_width (0.1.1)
  * warden (1.2.3)
  * will_paginate (3.0.4)

输出HTML

 <div class='navbar'>
          <div class='navbar-inner'>
            <div id='top_navi'><ul class="nav"><li id="remotefocus"><a href="/">Image</a></li><li class="active dropdown" id="urltests"><a href="/" class="dropdown-toggle active" data-target="#" data-toggle="dropdown">Network/Documentation <b class="caret"></b></a><ul class="dropdown-menu"><li class="active dropdown" id="network"><a href="/welcome/af_form" class="dropdown-toggle active" data-target="#" data-toggle="dropdown">URL Command <b class="caret"></b></a><ul class="tabs span16 dropdown-menu"><li class="active simple-navigation-active-leaf" id="vvtk"><a href="/urltests" class="active">VIVOTEK</a></li><li id="sony"><a href="/sony_url_command_automation_tests">SONY</a></li></ul></li><li id="trans_db"><a href="/translates">Firmware</a></li></ul></li><li id="translate"><a href="/">Translate String</a></li></ul></div>

2 个答案:

答案 0 :(得分:1)

如果您需要始终呈现完整的导航树(独立于当前URL),则需要在expand_all选项设置为true的情况下调用render_navigation:

render_navigation :expand_all => true, ...

如果您未通过此选项,简单导航通常只会渲染活动主导航项的子导航(取决于当前URL)。

答案 1 :(得分:0)

@poc。 正如我从你的问题中所理解的那样,你对“子菜单”有疑问 Bootstrap 2中有一个类dropdown-submenu,应该按如下方式使用:

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

问题是用于创建Bootstrap菜单的gem simple-navigation-bootstrap不会生成该类。

我刚刚创建了另一个gem simple_navigation_renderers来解决这个问题,并提供了创建Bootstrap“标题”和“分隔符”的简便方法。也可以添加任何类型的图标(库)。实际上,有两个渲染器:Bootstrap 2和Bootstrap 3.;)
试试吧。我认为它会对你有所帮助。我希望你会喜欢它。