Bootstrap列表组内的链接不起作用

Question

Here is my code. As you can see is a list-group of anchors that redirect to different sections (here changed to Twitter address in order to test the code) and a final dropdown menu with internal links too. You can check it in bootply too. And as you can see, the links are not working. Even if I take out the dropdown menu, it still doesn't work. It does nothing, and I am clueless about why.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <style> .list-group.panel > .list-group-item { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px } .list-group-submenu { margin-left:20px; } </style> <div class="list-group"> <a href="http://twitter.com" class="list-group-item list-group-item-action disabled" id="10_2016" target="_blank"> October 2016 <span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news">0</span> <span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news">0</span> </a> <a href="http://twitter.com" class="list-group-item list-group-item-action" id="9_2016" target="_blank"> September 2016 <span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news">2</span> <span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news">0</span> </a> <!-- Here go more months --> <a aria-expanded="true" href="#SubMenu1" class="list-group-item active" data-toggle="collapse" data-parent="#SubMenu1"> Historic <i class="fa fa-caret-down"></i> <span class="badge">1</span> </a> <div aria-expanded="true" style="" class="list-group-submenu collapse in" id="SubMenu1"> <a href="http://twitter.com" class="list-group-item active" data-parent="#SubMenu1" target="_blank"> 2015 <span class="badge">1</span> </a> <!-- Here go more years --> </div> </div> 

As @MoshFeu and @almostabeginner have proved in the comments, the code works, but it doesn't work in my project. Here I add a few more details about the environment of this code and what I've tried: The project is PHP, the html is prepared in a function in a class and echoed inside a column and row in bootstrap. I have changed the internal URL in href by the twitter URL to be sure the path was not bad. I have very little js going on on that page. In the console I can't see any malformed html or js errors. There is some specific styles for that page, but the only styles about links are about their colour. So I don't know what else could I try.

Answer 1

I think it is because you have set target="_blank" , remove that line and it should work.

http://www.bootply.com/VX0dtnLSbF

Clearly bootply does not allow new window, I tried

onclick="window.open(this.href,'_blank');return false;"

in bootply, and it still did not work, but the link works.

If you ever want to debug JS I suggest using Chrome "inspect" feature, that will make your life easy.

Edit to add:

This is the message you get when you click the Twitter link:

Refused to display ' https://twitter.com/ ' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

Simply put, bootply does not allow it, otherwise the link is working perfectly fine.

Answer 2

It was a stupid e.preventdefault in a stupid included file. Sorry I made you lose your time with this!