使用qtip时隐藏div

问题描述 投票:-1回答:2

也许这是一个虚拟问题,但是...在html加载后如何隐藏div然后通过qTip显示它的方式是什么?我试图用$(div).hide<div style="display: none;">隐藏它,但是qtip不起作用。

UPDATE

。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>
jquery html qtip qtip2
2个回答
0
投票

已解决答案是对此的评论之一:jQuery qTip: How to attach a single tooltip div to multiple target divs?

但是,如果有其他答案,欢迎您:)


0
投票

当我没有得到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>

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

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

© www.soinside.com 2019 - 2024. All rights reserved.