尝试使用 html、css 和 jquery/javascript 创建可点击的工具提示

Question

我正在尝试使用 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");});});

Answer 1

1。 .redy 是拼写错误吗？

$(文档).redy(function(){$(".dropmenu").click(function(){$(".dropdown-content").显示();});});

$(文档).ready() - https://learn.jquery.com/using-jquery-core/document-ready/

可点击

你这里的class名字末尾还有一个space

Answer 2

'clickable' 究竟是什么意思？你的意思是链接还是只能点击？如果您需要可点击，您可以使用 jQuery 添加 <a href="javascript:;"></a>，事件（悬停，点击，..）。

Answer 3

改成这样：

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/javascript 创建可点击的工具提示

Trying to create clickable tooltip using html, css and jquery/javascript

jquery

html

css

tooltip

clickable

我正在尝试使用 HTML、CSS 和 jQuery 创建可点击的工具提示，但它不起作用。我尝试了不同的选择。如果我让它可以悬停，它就可以工作，但我需要一个可点击的。