Question

如何绑定相同的函数但给出不同的参数？

我正在做一个下拉菜单，当我再次点击父母时，我试图隐藏子菜单（参见下文）

单击然后显示子菜单，然后再次单击并显示子菜单，然后隐藏它.o

到目前为止我目前所尝试的内容（请参阅下文）

jquery的

$( ".has_sub" ).bind({
    click: function() { //when click and sub is not displayed yet
        $(this).find('.sub').slideDown();
    }, click: function() { //when click and sub is displayed already
        $(this).find('.sub').hide();
    }
});

HTML

<ul>
    <li class="has_sub">
        <a href="#">Menu 1</a>
        <ul class="sub">
            <li>sub menu 1</li>
            <li>sub menu 2</li>
        </ul>
    </li>
</ul>

Answer 1

在您的情况下，由于您使用了相同的键两次，因此该对象将只有一个属性，其值为最后一项的值，因此只有一个处理程序 - 隐藏的处理程序将被注册。

由于您想要使用幻灯片动画切换显示，您可以使用slideToggle()

$(".has_sub").on('click', function() {
  $(this).find('.sub').stop().slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="has_sub">
    <a href="#">Menu 1</a>
    <ul class="sub">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
    </ul>
  </li>
</ul>

Answer 2

这是我自己博客的代码。希望，你想要类似的一个：

$('#first').on('click', function() {
    $(this).children().toggleClass('active');
    $('#second').toggleClass('active');
});

然后在CSS中，您只需使用margin-left: -300px;或使用css3 transform: translate。

以下是Working Demo

Answer 3

＆＃13;

$(".has_sub").on('click', function() {
  var $sub = $(this).find('.sub');
  if ($sub.is(":visible")) {
    $sub.hide();
  } else {
    $sub.slideDown();
  }
});

＆＃13;

.sub {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="has_sub">
    <a href="#">Menu 1</a>
    <ul class="sub">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 4

这里有一些很好的答案，但是如果您希望菜单保持打开状态，直到再次单击菜单链接，这将完全相同。

＆＃13;

$(".has_sub > a").click(function () { 
    $(this).next('.sub').toggle('slow');
});

＆＃13;

.sub{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="has_sub">
        <a href="#">Menu 1</a>
        <ul class="sub">
            <li>sub menu 1</li>
            <li>sub menu 2</li>
        </ul>
    </li>
        <li class="has_sub">
        <a href="#">Menu 2</a>
        <ul class="sub">
            <li>sub menu 1</li>
            <li>sub menu 2</li>
        </ul>
    </li>
</ul>

＆＃13;

许多答案，类似但不同的方法。拥有多种方法总比没有好。如果您有任何疑问，请发表评论，我会尽快回复您。

我希望这会有所帮助。快乐的编码！

单击时显示，然后再次单击时隐藏

4 个答案: