任何想法如何使用 css/jquery 复制这个内联下拉菜单答案

【问题标题】：Any ideas how to replicate this inline dropdown menu using css/jquery任何想法如何使用 css/jquery 复制这个内联下拉菜单
【发布时间】：2012-01-01 18:58:57
【问题描述】：

我想知道是否有人知道存在一个插件来复制这样的内联下拉/菜单。需要注意的关键是所选元素的间距应保持句子格式。

当点击链接时，它应该作为一个下拉菜单..

如果有类似的东西，我宁愿不要从头开始写。

注意：下拉值被选中，href 链接文本被替换为所选值。

【问题讨论】：

标签： jquery css menu drop-down-menu

【解决方案1】：

点击指定元素的简单小弹出窗口以及替换链接文本。我假设您想要存储选定的排序类型，因此我包含了一个小 sortKey 变量作为您可以使用的示例。小提琴供参考：http://jsfiddle.net/GKwn3/2/

<div id="somecontent">Sort leads by <span id="sort" href="#">date created</span> displaying first name....</div>
<div id="pop">
    <div class="link" data-sort="first" >First Name</div>
    <div class="link" data-sort="last">Last Name</div>
    <div class="link" data-sort="company">Company</div>
    <div class="link" data-sort="rating">Rating</div>
    <div class="link" data-sort="created">Date Created</div>
    <div class="link" data-sort="updated">Date Updated</div>
</div>

var $menu = $('#pop');

$('#sort').click(function(e) {
    $menu.css({
        "left": e.offsetX + "px",
        "top": e.offSetY + "px"
    }).show();
});

$('#pop .link').click(function(e) {
    var ele = $(this);
    var sortKey = ele.attr('data-sort'); // save it somewhere
    $('#sort').html(ele.html().toLowerCase());

    $menu.hide();
});

#sort{
 color: blue;
 border-bottom: 1px dotted blue;  
}

#pop{
 color: #444;   
 width: 95px;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
}

.link:hover {
 color: red;
 cursor: pointer;
}

【讨论】：

正是我需要的......我会将它包装到一个插件中。谢谢@jesse

【解决方案2】：

SimpleTip 提供您正在寻找的内容。查看他们的演示，特别是 onclick 的演示。您可以使用此插件轻松实现您的愿景。

【讨论】：

不是我想要的。我不需要悬停功能。用户需要能够点击 href..然后下拉菜单将显示并允许他们选择记录。然后 href 值将切换到所选记录。
@KevinJensen：你说你想要一个简单的插件......我的意思是，你可以很容易地添加链接来改变列表的顺序或任何排序到这个工具提示中，不是吗？悬停功能只是一个附加的东西，但除此之外，这个插件还可以解决问题。或者你可以自己写——找到鼠标位置并在那里放置一个 div 并不难，或者更具体地说，在你想要做的 a 标签的下方或旁边。
是的，我可以破解这个插件，让它像我需要的那样用作下拉菜单，但我想看看是否有人在这样做之前已经解决了我的用例。

【解决方案3】：

您可以使用此插件并通过一些 css 更改来实现您想要的效果

http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html

还有这个http://pop.seaofclouds.com/

【讨论】：