尝试使用 html、css 和 jquery/javascript 创建可点击的工具提示
Trying to create clickable tooltip using html, css and jquery/javascript
我正在尝试使用 HTML、CSS 和 jQuery 创建可点击的工具提示,但它不起作用。我尝试了不同的选择。如果我让它可以悬停,它就可以工作,但我需要一个可点击的。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
visibility: hidden;
min-width: 122px;
padding: 5px 0;
background-color: #1F2B38;
text-align: center;
z-index: 1;
top: 130%;
left: 50%;
margin-left: -60px;
box-shadow: 0px 8px 16px 0px white;
border-radius: 10px;
}
.dropdown-content a {
padding: 12px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
color: #99A3A4;
text-decoration: underline;
}
/*.dropdown:hover .dropdown-content {display: block;visibility:visible;}*/
.dropdown .dropdown-content::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}
</style>
<li class="dropdown">
<a href="#" class="dropmenu ">My Account</a>
<div class="dropdown-content" id="drop-list">
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Log Out</a>
</div>
</li>
</body>
</html>
----jquery代码为:-------------------------------- ------
$(document).raedy(function(){$(".dropmenu").click(function(){$(".dropdown-content").show();});});
我也试过
$(document).ready(function(){$(".dropmenu").click(function(){$(".dropdown-content").attr("visibility":"visible");});});
1。
.redy 是拼写错误吗?
$(文档).redy(function(){$(".dropmenu").click(function(){$(".dropdown-content").显示();});});
$(文档).ready() - https://learn.jquery.com/using-jquery-core/document-ready/
- 可点击
你这里的class名字末尾还有一个space
'clickable' 究竟是什么意思?你的意思是链接还是只能点击?如果您需要可点击,您可以使用 jQuery 添加 <a href="javascript:;"></a>
,事件(悬停,点击,..)。
改成这样:
1) 将 .redy 改为 ready :
$(document).ready(function(){
2) 在选择器“.dropdown-content”中将 visibility:hidden;
更改为 display:none;
注意:show() 适用于使用 jQuery 方法和 CSS 中的 display:none 隐藏的元素(但不是 visibility:hidden)。
最终代码:
<!DOCTYPE html>
<html>
<head>
<script src="jq.min.js"></script>
<style>
.dropdown {position:relative;display: inline-block;}
.dropdown-content {position:absolute;display:none;min-width:122px;padding:5px 0;background-color:#1F2B38;
text-align:center;z-index:1;top:130%;left:50%;margin-left:-60px;box-shadow: 0px 8px 16px 0px white;border-radius: 10px;}
.dropdown-content a {padding: 12px;text-decoration: none;display: block;}
.dropdown-content a:hover {color:#99A3A4;text-decoration:underline;}
/*.dropdown:hover .dropdown-content {display: block;visibility:visible;}*/
.dropdown .dropdown-content::after {content: "";position: absolute;bottom:100%;left:50%;margin-left:-5px;
border-width:10px;border-style:solid;border-color:transparent transparent white transparent;}
</style>
</head>
<body>
<li class="dropdown">
<a href="#" class="dropmenu ">Clickable</a>
<div class="dropdown-content" id="drop-list">
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Log Out</a>
</div>
</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropmenu").click(function(){
$(".dropdown-content").show();
});
});
</script>
</body>
</html>
我正在尝试使用 HTML、CSS 和 jQuery 创建可点击的工具提示,但它不起作用。我尝试了不同的选择。如果我让它可以悬停,它就可以工作,但我需要一个可点击的。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
visibility: hidden;
min-width: 122px;
padding: 5px 0;
background-color: #1F2B38;
text-align: center;
z-index: 1;
top: 130%;
left: 50%;
margin-left: -60px;
box-shadow: 0px 8px 16px 0px white;
border-radius: 10px;
}
.dropdown-content a {
padding: 12px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
color: #99A3A4;
text-decoration: underline;
}
/*.dropdown:hover .dropdown-content {display: block;visibility:visible;}*/
.dropdown .dropdown-content::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}
</style>
<li class="dropdown">
<a href="#" class="dropmenu ">My Account</a>
<div class="dropdown-content" id="drop-list">
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Log Out</a>
</div>
</li>
</body>
</html>
----jquery代码为:-------------------------------- ------
$(document).raedy(function(){$(".dropmenu").click(function(){$(".dropdown-content").show();});});
我也试过
$(document).ready(function(){$(".dropmenu").click(function(){$(".dropdown-content").attr("visibility":"visible");});});
1。 .redy 是拼写错误吗?
$(文档).redy(function(){$(".dropmenu").click(function(){$(".dropdown-content").显示();});});
$(文档).ready() - https://learn.jquery.com/using-jquery-core/document-ready/
- 可点击
你这里的class名字末尾还有一个space
'clickable' 究竟是什么意思?你的意思是链接还是只能点击?如果您需要可点击,您可以使用 jQuery 添加 <a href="javascript:;"></a>
,事件(悬停,点击,..)。
改成这样:
1) 将 .redy 改为 ready :
$(document).ready(function(){
2) 在选择器“.dropdown-content”中将 visibility:hidden;
更改为 display:none;
注意:show() 适用于使用 jQuery 方法和 CSS 中的 display:none 隐藏的元素(但不是 visibility:hidden)。
最终代码:
<!DOCTYPE html>
<html>
<head>
<script src="jq.min.js"></script>
<style>
.dropdown {position:relative;display: inline-block;}
.dropdown-content {position:absolute;display:none;min-width:122px;padding:5px 0;background-color:#1F2B38;
text-align:center;z-index:1;top:130%;left:50%;margin-left:-60px;box-shadow: 0px 8px 16px 0px white;border-radius: 10px;}
.dropdown-content a {padding: 12px;text-decoration: none;display: block;}
.dropdown-content a:hover {color:#99A3A4;text-decoration:underline;}
/*.dropdown:hover .dropdown-content {display: block;visibility:visible;}*/
.dropdown .dropdown-content::after {content: "";position: absolute;bottom:100%;left:50%;margin-left:-5px;
border-width:10px;border-style:solid;border-color:transparent transparent white transparent;}
</style>
</head>
<body>
<li class="dropdown">
<a href="#" class="dropmenu ">Clickable</a>
<div class="dropdown-content" id="drop-list">
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Log Out</a>
</div>
</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropmenu").click(function(){
$(".dropdown-content").show();
});
});
</script>
</body>
</html>