代码之家 › 专栏 › 技术社区 › Robert W

使用jquery的“Pin菜单”

jquery javascript

Robert W · 技术社区 · 16 年前

我不知道如何调用RegExpal用于快速引用的菜单类型,因此我将其称为“Pin菜单”(不确定是否有更合适的名称?),但我想重新创建功能,基本上是:

鼠标悬停时打开,鼠标悬停时关闭。
固定功能使其永久打开。
关闭按钮立即关闭它(尽管我不太担心这个部分)。

我将如何在jquery和/或标准javascript中创建它。

可以找到regexpal示例 here (这是快速参考)。我在下面发布了一个截图:

screenshot

3 回复 | 直到 11 年前

Maas 16 年前

我喜欢奥利的回答,但算了吧,我已经写了这个。不管怎样,您都希望远离“锁定的”全局,并将所有这些打包到一个插件中(您确定一个插件不存在吗?).

风格:

#pincontent {
  display: none;
  border: 1px solid black;
}

#pin, #close {
  cursor: pointer;
}

代码:

$(document).ready(function() {
  $('#pinmenu').data('pinned', 0);

  $('#pintrigger').mouseover(function() {
    $('#pincontent').show();
  });

  $('#pinmenu').mouseleave(function(evt) {
    if ($('#pinmenu').data('pinned') !== 1) {
      $('#pincontent').hide();
    }          
  });      

  $('#pin').click(function() {
    var pinned = $('#pinmenu').data('pinned');
    if (pinned === 0) {
      $('#pin').css('color', 'red');
      $('#pinmenu').data('pinned', 1);        
    } else {
      $('#pin').css('color', 'black');
      $('#pinmenu').data('pinned', 0);        
    }
  });

  $('#close').click(function() {
    $('#pincontent').hide();
    $('#pin').css('color', 'black');
    $('#pinmenu').data('pinned', 0);                
  });
});

HTML:

<div id='pinmenu'>
  <div id='pintrigger'>My Trigger</div>
  <div id='pincontent'>
    <div><span id='pin'>Pin</span> <span id='close'>Close</span></div>
    <div>Some text lalal</div>
  </div>
</div>  
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Hoff 16 年前

从概念上讲,您需要做的是:

创建一个隐藏的DIV(带有'display:none;')并将其放置在以后要显示的位置。为相应的按钮创建鼠标悬停处理程序,如下所示:

$('#button').mouseover(function(){
    $('#menu').css({ 'display': 'block' }); // this will make the hidden menu become visible
});

然后创建鼠标离开处理程序:

$('#menu').mouseleave(function(){
        $('#menu').fadeOut() // this will hide the menu again
});

若要在用户希望时保持菜单打开,请再次取消绑定mouseleave even事件,如下所示:

$('#pin').click(function(){
   $('#menu').unbind();
});

希望这有帮助,

马丁

almog.ori 16 年前

下面是一个使用jquery的示例。

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<a class="menuItem" href="#" >Click me</a>
<div style="display:none;" class="panel">
    <div class="pin">
        Free
    </div>
    <p> 
        Contents here
    </p>
</div>
<script type="text/javascript">

    var locked = false;
    $("div.pin").click(function() {
        locked = !locked
        $(this).text((locked) ? "Pinned" : "Free");
    });

    $("a.menuItem").mouseenter(function() {
        $("div.panel").show('fast');
    });

    $("div.panel").mouseout(function() {
        if (locked == false) {
            $("div.panel").hide("fast");
        }
    });

</script>