Question

我正在尝试创建自定义引导程序导航栏，如下图所示：

我使用的是通常的引导程序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"设置为a内的li标记。遵循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>');

})

我上面附加的图片仅显示第一个链接上的行为。但是我想要点击链接中的相同行为。目前，当我点击其他链接时，行为非常混乱。

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

感谢任何帮助!!!

Answer 1

最后找到答案。

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

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

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

尝试创建自定义引导程序导航栏

1 个答案: