Any ideas how to replicate this inline dropdown me

问题:

I'm wondering if anyone knows of a plugin that exists to replicate an in-line dropdown/menu like this. The key to note is that the spacing of the selected element should remain in sentance format.

when clicking the link, it should act as a drop-down menu..

I'd rather not write this from scratch if there is something out there similar.

NOTE: The dropdown value is selected and the href link text is replaced with the selected value.

回答1:

Simple little pop up on click for the specified element along with replacing the link text. I'm assuming you would want to store the selected sort type so I included a little sortKey variable as an example that you could use. Fiddle for reference: 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;
}

回答2:

SimpleTip offers what you're looking for. Check out their demos, specifically the one that works onclick. You could easily make your vision work with this plugin.

回答3:

you can use this plugin and achieve what you want with some css changes

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

and also this http://pop.seaofclouds.com/