jquery - 任何想法如何使用 css/jquery 复制此内联下拉菜单

Question

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

单击链接时，它应该充当下拉菜单。

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

注意:下拉值已选择，href 链接文本将替换为所选值。

Answer 1

单击指定元素时会弹出一个简单的小弹出窗口，并替换链接文本。我假设您想要存储选定的排序类型，因此我包含了一个小的 sortKey 变量作为您可以使用的示例。 fiddle 供引用: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;
}