Question

我正在使用bootstrap作为我的主导航，并且我点击了下拉菜单水平位置，请参阅下面的截图。

enter image description here

到目前为止，这是我的导航。

<section class="row">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">about us
              <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="about-us">about us</a></li>
              <li><a href="mission">mission</a></li>
              <li><a href="kari-olson">team</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">impact <span
                  class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="cybercycle">CyberCycle</a></li>
              <li><a href="music">Music & Memory</a></li>
              <li><a href="care-innovations">Care Innovations</a></li>
              <li><a href="mehca">MeHCA</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">spotlight
              <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="news">in the news</a></li>
              <li><a href="awards">awards / future</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">resources
              <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="partners">partners</a></li>
              <li><a href="media">videos & photos</a></li>
              <li><a href="tools">tools & reports</a></li>
              <li><a href="press">press releases</a></li>
              <li><a href="stories">impact stories</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">get involved
              <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="partner-with-us">partner with us</a></li>
              <li><a href="volunteer-with-us">volunteer with us</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</section>

我要做的是在导航父母的子页面时保持下拉列表的扩展，这样网站访问者就不会被迫继续点击“影响”。链接以浏览其他子页面。任何帮助将不胜感激。谢谢你的帮助。

Answer 1

通过引导程序JavaScript文档：

$('.dropdown-toggle').dropdown('toggle')

这将切换下拉列表。

为了只打开与给定页面对应的下拉列表，您需要一些方法来确定＆＃34;对于我当前的页面，什么是正确的下拉列表？＃34;？一种方法是为每个页面添加不同的代码行;这是不理想的。

更好的选择是根据当前页面的某些属性匹配正确的dropdown = toggle。例如，如果您知道当前页面的标题将与导航栏中链接的标题匹配，则可以选择与当前页面匹配的链接，找到其父下拉列表，找到触发该下拉列表的按钮，并切换它：

link = $('a').filter(function(index) { return $(this).text() === document.title; });
dropdown = link.parents('.dropdown');
button = dropdown.find('.dropdown-toggle');
button.dropdown('toggle');

你也可以用

替换最后两行

dropdown.addClass('open');

（只需打开下拉菜单，而不是切换按钮），但这不会突出显示您的下拉菜单切换链接/按钮。

Answer 2

@kittsil再次感谢您的时间。在我阅读你的帖子之前，我拼凑了一个白痴，略显肮脏，但是从我最初的答案和我在帖子Check if url contains string with JQuery上阅读的代码中找到的工作示例，下面是我的工作代码。我仍然需要折射它以减小尺寸，但它确实按预期工作。

<script>
  $(function() {
    if (window.location.href.indexOf("about") > -1)
      $('.dropdown-toggle.about').dropdown('toggle');
    else if (window.location.href.indexOf("impact") > -1)
      $('.dropdown-toggle.impact').dropdown('toggle');
    else if (window.location.href.indexOf("spotlight") > -1)
      $('.dropdown-toggle.spotlight').dropdown('toggle');
    else if (window.location.href.indexOf("resources") > -1)
      $('.dropdown-toggle.resources').dropdown('toggle');
    else if (window.location.href.indexOf("involved") > -1)
      $('.dropdown-toggle.involved').dropdown('toggle');
    else console.log('Netfinity is Awesome!!')
  });
</script>

在导航子页面时保持打开下拉菜单

2 个答案: