I currently have a jquery selectable list set up and would like to have the ability for single items have a drop down for more information. The drop down will appear upon a dblclick of the list item. The problem I am running into is that if you dblclick the item from the start it technically is unselected, yet the drop down is shown. I would like to disable this so the dblclick is only achievable when selected. Here is my code
<style>
#selectable { padding: 24px 12px;}
#selectable li {margin: 0; padding: 12px 6px; border: 1px solid #66CCFF;}
#selectable .ui-selecting {background: #FFCC66;}
#selectable .ui-selected {background: #FF9933;}
#hiding {margin: 0; background: #FFCC66; display:none;}
</style>
<body>
<ul id="selectable">
<li>Item1</li>
<ul>
<li id="hiding">Soda</li>
</ul>
<li>Item2</li>
<li>Item3</li>
</ul>
</body>
<script>
$("#selectable").bind("mousedown", function(e){
e.metaKey = true;
}).selectable();
$("#selectable").dblclick(function() {
$("#hiding").slideToggle();
});
</script>
Also accesible here http://jsfiddle.net/someyoungideas/BXjaS/3/
Thanks