Question

也许这是一个虚拟问题，但是...当html加载然后通过qTip显示时，隐藏div的方法是什么？我尝试使用$(div).hide和<div style="display: none;">隐藏它，但qtip不起作用。

更新

.js中的代码

$('#usuario').qtip({
    content: $(this).next(),
    show: 'click',
    hide: 'unfocus'
});

html中的代码

<span id='usuario_menu'>
            <a id="usuario" ><?php echo $_SESSION['correo']; ?></a>
            <div class="hidden">
                <a href="php/login_out.php">Cerrar sesión</a><br/>
                <a href="">Otra cosa</a>
            </div>
            <img src='' alt="Tareas pendientes">
        </span>

Answer 1

<强>解决答案就是对此的评论：
jQuery qTip: How to attach a single tooltip div to multiple target divs?

然而，如果有其他人回答，欢迎他们：）

Answer 2

当我没有得到qtip的隐藏元素方法并且在这里没有得到我的答案时，我偶然发现了这个问题，在解决问题之后，我将发布一些工作代码。只供其他人查找。

您的问题是您的js代码中的$(this)。您可以与$("#usuario")交换它。如果您在div中使用“隐藏”类，则应通过将CSS规则应用于该类.hidden{ display:none; }来隐藏它。您其余的代码还可以，我只是将您的php代码更改为“测试”，因为我不使用您的服务器：-）。

这是代码：

<head>
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<span id='usuario_menu'>
            <a id="usuario" >test</a>
            <div class="hidden">
                <a href="php/login_out.php">Cerrar sesión</a><br/>
                <a href="">Otra cosa</a>
            </div>
            <img src='' alt="Tareas pendientes">
        </span>
</body>

<style>
.hidden{ display:none; }
</style>

<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript" src="jquery.qtip.js"></script>
<script>
$('#usuario').qtip({
content: $("#usuario").next(),
show:'click',
hide:'unfocus'
});
</script>

必须将文件jquery.qtip.css，jquery-3.4.1.js和jquery-3.4.1.js包含在与上述html文件相同的目录中，然后才能运行。您可以在小提琴中尝试一下自己：https://jsfiddle.net/Lf6s9um4/。只需点击“测试”一词即可。

当然，如果要使用许多隐藏的许多div并使用它们显示工具提示，那么这并不是最佳解决方案。然后，您应该在qtip2指南http://qtip2.com/guides中查找“隐藏元素”。

使用qtip时隐藏div

2 个答案: