引导下拉不起作用即使按上下键都正常工作

我试图创建一个简单的下拉式引导下拉的帮助。引导下拉不起作用即使按上下键都正常工作

我包括所有文件，它在一些地方工作正常，但在几页中，当我点击3个点，应该打开下拉没有任何显示。当我按下向下键时，弹出选项。

我以为是什么东西，其中的东西与Z指数混乱。所以我试着把Z-index:100;，但它没有达到我的目的。所以必须把东西放在这里。

在此先感谢谁会提出一个帮助的想法。我的代码是这样的。

<span class="pull-right dropdown" > 
    <a href="#" lass="dropdown-toggle" data-toggle="dropdown"> 
     <i class="fa fa-circle" style="font-size:7px;"></i> 
     <i class="fa fa-circle" style="font-size:7px;"></i> 
     <i class="fa fa-circle" style="font-size:7px;"></i> 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="width:160px; right:14px;"> 
     <li><a style="width:155px;" href="edit_blog.php?b=<?php echo base64_encode($blog_id); ?>" target="_blank">Edit Blog</a></li> 
     <li><a style="width:155px;" href="javascript:void(0);" class="delete_blog" id="delete_blog-<?php echo $blog_id;?>">Delete Blog</a></li> 
    </ul>        
</span>

万一出时不包括正确的文件搞乱了，这些都是我包含的文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

https://jsfiddle.net/hantr01n/

来源

2017-06-17 Archelese

哪里是你的CSS –

bootstrap.min.css已经包含 – Archelese

当我做出了摘录显示没有 –

.container { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: Arial; 
 
} 
 

 
.container a { 
 
    float: left; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px;  
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    background-color: inherit; 
 
} 
 

 
.container a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    float: none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #ddd; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
    <a href="#news">Link</a> 
 
</div> 
 

 
<h3>Dropdown Menu inside a Navigation Bar</h3> 
 
<p>Hover over the "Dropdown" link to see the dropdown menu.</p> 
 

 
</body> 
 
</html>

你需要试试这个

来源

2017-06-18 08:38:10

感谢很多人为我工作 – Archelese

没关系。并请检查左侧的标记，并给我一个投票 –

已经做到了，但我的声望在25以下，所以我自己的投票不算数，即使它是我的问题。 – Archelese

引导下拉不起作用即使按上下键都正常工作

回答

相关问题