Javascript 单击div时是否可以显示标题？

我希望当用户用鼠标点击div时，标题（不是工具提示）变成“弹出”

---

我不想等待鼠标悬停时标题出现（但也需要鼠标悬停）

---

我创建了一个jQuery函数$.hasTitle（）

此新函数采用元素的父div.title，并采用下一个span.text作为标题。现场检查：

---

js:

---

html:

---

---

你自己至少试过这样做吗？请注意，StackOverflow不是PeoplePerHour。“我不想等到鼠标悬停时标题出现（但它也需要鼠标悬停）”令人困惑的是，你的代码在哪里？是的，我已经尽了一切努力让它工作。。。StackOverflow问题永远是我最后的选择@atmd我的意思是，用户应该能够悬停在div上并获得标题，但他也应该能够通过单击div来获得标题。好的，我明白了，你能显示你的代码吗？不，对不起。当我点击div时，我需要立即弹出标题，但如果我不点击div，我希望标题与鼠标悬停一样正常。这是我试图避免的。我在问题中提到了这一点。但是，如果没有人对可能的解决方案提出建议，那么这可能是唯一的办法。。。我努力了一点，现在得到了这个。。。检查是否有帮助

<div id="someDiv" title ="Info on both click and hover!"></div>

$('#someDiv').click(function () {
  $(this).attr("title");   
  //And how do I show the title right away?
});

(function($) {
    jQuery.fn.extend({
        hasTitle: function(){
            $(this).on("mouseenter mouseout", function(e){
                var title = $(this).closest("div.title");
                var text = title.next("span.text").first();
                text.fadeToggle().css({
                    left: e.pageX,
                    top:  e.pageY
                });
            });
        }
    });
})(jQuery);



$("#elementOne").hasTitle();
$("#elementTwo").hasTitle();

<div class="title">
    <div id="elementOne">
        elementOne
    </div>
</div><span class="text">Title: Info on hover!</span>

<br/><br/><br/><br/>

<div class="title">
    <ul id="elementTwo">
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</div><span class="text">It is a list</span>

span.text{
    position: absolute;
    display: none;
    font-size: 10px;
    font-family: Comic Sans MS;
    background-color: #ccc;
}