Question

我正在构建一个导航功能，该功能与w3schools（https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp）中可悬停的sidenav按钮菜单相似。我正在配置我的版本以采用jQuery插件的形式。到目前为止，我已经能够提出一个基本插件，该插件可以为多达4个默认的sidenav选项卡启用对象选项。但是，我想使用户能够创建其他选项卡，而不必每次添加新的div时都手动创建新功能。我应该如何启用它？是否可以某种形式使用“ this.each（function（）{}）”将功能应用于每个选项卡？如果是这样，该怎么办？如果没有，您有什么建议？请参见下面的代码。非常感谢！

_queueClientCache

    <div id="block1" class="block"></div>
    <div id="block2" class="block"></div>
    <div id="block3" class="block"></div>
    <div id="block4" class="block"></div>
    <div id="block5" class="block"></div>

    <script>
      $("#block1").slideHover({
        backgroundColor: "green"
      });
      $("#block2").slideHover({
        top: 120
      });
      $("#block3").slideHover({
        top: 180
      });
      $("#block4").slideHover({
        top: 240
      });
      $("#block5").slideHover({
        top: 240
      });
    </script>

Answer 1

你是这个意思吗？

$(".block").mouseover(function() {
  $(this).animate({ "left": "+=50px" }, "fast" );
});

具有委派（动态需要）的

$("#someContainerDivId").on("mouseover",".block",function() {
  $(this).animate({ "left": "+=50px" }, "fast" );
});

如何在jQuery插件中使用.each（）

1 个答案: