高亮显示文本后打开下拉菜单

open dropdown menu after highlighting text

本文关键字：下拉菜单 显示 文本 高亮      更新时间：2023-10-26

我试图在网页上突出显示文本后打开一个下拉菜单，但下拉菜单没有打开。此外，我已经将对象转换为字符串，这样当您在窗口中单击但没有选择任何文本时，它就不会打开，我应该创建一个DIV而不是字符串吗？

html:

 <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">comment</a></li>
    <li><a href="#">message</a></li>
  </ul>

js:

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.getSelection) {
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
    return false;
}
var selection = getSelected();

function checkObj(){
    var a = String(selection);
  var b = a.length;
  if (b > 0){
   $('.dropdown-menu').dropdown('toggle');//this isn't working
  }
}
    $(window).mouseup(function() {
  var a = checkObj(selection);
});

更新：我有一个菜单要显示，但只有当我突出显示文本，然后将指针拖到我工作的文本框外时，它才会显示，但如果我只突出显示一个单词，它就不起作用了。此外，我可以让下拉列表显示在我高亮显示的文本上。

http://liveweave.com/vDCkDp

$('.dropdown-menu').dropdown('toggle');

由于dropdown函数可能会检查点击事件或其他什么，因此无法工作。

$('.dropdown-menu').show();似乎能正确打开菜单，需要手动编写js代码才能关闭菜单，请参阅https://css-tricks.com/dangers-stopping-event-propagation/以获取在元素外部单击时关闭元素的正确方式。

相关文章：