jquery - Bootstrap 3 事件状态导致导航栏上的错误

Question

当我选择其中一个导航选项时，我正在创建一个带有 JQuery 事件状态边框底部的静态导航栏。

但是，我认为 Bootstrap 3 会导致事件状态出现奇怪的问题，因为每当我单击其中一个链接时，导航链接的间距就会变小，并且 li 会移到顶部。

有没有办法防止 Bootstrap 3 事件状态改变我的导航链接？

更新 我发现问题出在 JQUERY 主动选择器上 我仍在对其进行故障排除:https://jsfiddle.net/88z02dx6/

$('.vnavbar ul li a').click(function() {
    $('active').removeClass();

    $(this).addClass('active a');
}); 

奖励:出于某种原因，我无法使下拉菜单正常工作，我不希望它在悬停或处于事件状态时突出显示，我只希望它下拉一个下拉菜单当我点击它时列出。谢谢!

https://jsfiddle.net/DTcHh/23151/

CSS:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.bodyh {height:100%; background-color:blue;}

.tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}

    .tabs__item {
        display: table-cell; /* [4] */
    }

        .tabs__link {
            display: block; /* [5] */
        }


/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */
.primary-nav {
    text-align: center;  height:48px; position: relative;
    overflow: hidden; background:#333 !important; border-radius: 0 !important; /* [1] */
}

        .primary-nav a {
            padding: 1em;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }

        .primary-nav a:hover {
            background-color: #666;
        }

.primary-nav a.active {
  border-bottom: 4px solid #f90;  color: #f90;   padding:1em; 
}

HTML

    <li class="tabs__item">
        <a href="#" class="tabs__link">Content</a>
    </li>

    <li class="tabs__item">
        <a href="#" class="tabs__link">Search</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Profile</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Voozlr</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Store</a>
    </li>

      <li class="tabs__item">
        <a href="#" class="tabs__link">Mail</a>
    </li>



              <li class="dropdown tabs__item">


            <a href="#" class="dropdown-toggle tabs__link" dropdown-toggle="" data-toggle="dropdown">Me <b class="caret"></b>   
            </a>

            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li>
                <a href="#">Separated link</a>
              </li>
            </ul>
          </li>

</ul>

          </nav>            
      <!-- /.navbar-collapse -->    
    </header>
  <div class="bodyh"></div>

Answer 1

A. 看这里 jsfiddle

1. 如果您将 border 添加到 a.active，您必须确保该 border 的空间已经存在，或者你会有一些视觉问题。所以使用:

   border-bottom:4px solid transparent;
   

2. 在单击之前，您在 a 上有一个类 tabs__link。对于那个类，您有 display:block 的 css 样式。通过删除 a 拥有的所有类，你失去了那种风格。所以您还需要将 display:block 添加到 a。

所以最后你有这段代码

 .primary-nav a {
        padding: 1em;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        display:block;
        border-bottom:4px solid transparent;
    }

B. 或另一种方法(这里我还包括下拉菜单的解决方案)

看这里 jsfiddle

1. 同时在 li.dropdown 内的 a 上保留类 dropdown-toggle ，并保留 tabs__link 类，你应该使用这个(所以你不需要像以前的解决方案那样在 a 上添加 display:block )

   $('li:not(.dropdown) a').attr('class', 'tabs__link');
   $('li.dropdown a').attr('class', 'dropdown-toggle tabs__link');
   

2. 要使 .dropdown-menu 正常工作，您首先需要从 .primary-nav 中删除 overflow:hidden。然后你需要一点 JQ 来 slideToggle() .dropdown-menu 当你点击一个 a.dropdown-toggle

   if($(this).hasClass('dropdown-toggle')){
       $(this).siblings(".dropdown-menu").slideToggle()
   }else{
       $(".dropdown-menu").slideUp()
   }
   

所以。最后你有一个像这样的JQ

$('.vnavbar ul li a').click(function() {
    $('li:not(.dropdown) a').attr('class', 'tabs__link');
    $('li.dropdown a').attr('class', 'dropdown-toggle tabs__link');

    $(this).addClass('active');

    if($(this).hasClass('dropdown-toggle')){
        $(this).siblings(".dropdown-menu").slideToggle()
    }else{
    $(".dropdown-menu").slideUp()
    }

});