任何想法如何复制此内联下拉菜单使用css / jquery [英] Any ideas how to replicate this inline dropdown menu using css/jquery

问题描述

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

src =https://i.stack.imgur.com/VzlQC.jpgalt =enter image description here>

我不想写这个

注意：选择了下拉列表值，并将href链接文本替换为所选的值。

解决方案

在指定的元素上点击，轻松弹出，同时替换链接文本。我假设你想要存储所选的排序类型，所以我包括一个小的sortKey变量作为一个例子，你可以使用。供参考： http://jsfiddle.net/GKwn3/2/

 < div id =somecontent>排序引导者< span id =sorthref =＃>创建日期< span>显示第一个名称....< / div> 
< div id =pop> 
< div class =linkdata-sort =first>名字< / div> 
< div class =linkdata-sort =last>姓氏< / div> 
< div class =linkdata-sort =company>公司< / div> 
< div class =linkdata-sort =rating> Rating< / div> 
< div class =linkdata-sort =created>创建日期< / div> 
< div class =linkdata-sort =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 -sort'）; //将它保存到某处
 $（'＃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; 
} 
  

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.

解决方案

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;
}

这篇关于任何想法如何复制此内联下拉菜单使用css / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！