javascript - 尝试创建自定义 Bootstrap 导航栏

Question

我正在尝试创建自定义 Bootstrap 导航栏，如下图所示:

我使用的是常用的 Bootstrap navbar-default 并在 css 中进行了以下更改:

 .navbar-default{
  margin-top:50px;
  background:transparent;
  border:none
} 
/* 
.nav>li{
  margin:0;
  padding:0
}

li.active{
  border-top:3px solid red;
   padding-top:60px

}

 */
 li.active div.abc{
    border-top: 3px solid red;
    height: 56px;
    position: relative;
    width: 56px;
    top: -20px;
 }

 li.active a{
    padding-top: 32px;
    position: absolute;
    padding-left: 14px;
    text-decoration: none;
 }

 li.active a:visited{
   color:green
 }

您在上面的 css 代码中看到的 div.abc 是我通过 jQuery 动态添加的。每当点击某个链接时，我都会将其 class 设置为 active 并将 wrapping div class="abc" 设置为li 中的 a 标签。 以下 jQuery 代码将使它更清晰:

$(document).ready(function(){

                $('.navbar-nav li').on('click',function(){

                        $('.navbar-nav li').removeClass('active');

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

                        if($(this).find("div")){
                            //if div inside of li, dont do anything             
                        }        
                        else{
                             $(this).find('a').wrap('<div class="abc"></div>');
                        }

        })

                $('.navbar-nav li.active').find('a').wrap('<div class="abc"></div>');

})

我上面附上的图片只显示了第一个链接上的行为。但我希望链接中的行为相同被点击。目前，当我点击其他链接时，行为非常困惑。

还附上 fiddle ，以便更清楚地了解我到目前为止所取得的成就:https://jsfiddle.net/anzrv6fw/1/

感谢任何帮助!!!

Answer 1

终于找到答案了。

将这两行添加到 jQuery 中，它起作用了:

var cnt=$('.navbar-nav li div.abc').contents();
$('.navbar-nav li div.abc').replaceWith(cnt);

感谢看到帖子并试图提供帮助的任何人。