Question

我有三个ID为“albums”，“about”和“contact”的元素，以及三个通过toggle（）函数显示/隐藏它们的链接，ID为“togglealbums”，“toggleabout”和“togglecontact”。我只希望能够随时看到其中一个元素，所以我编写了以下函数：

$('#togglealbums').click(function() {
  if( $('#about').is(':visible') ) {
    $('#about').toggle(function() {
      $('#albums').toggle();
    });
  } else if( $('#contact').is(':visible') ) {
    $('#contact').toggle(function() {
      $('#albums').toggle();
    });
  } else {
    $('#albums').toggle();
  }
});

$('#toggleabout').click(function() {
  if( $('#albums').is(':visible') ) {
    $('#albums').toggle(function() {
      $('#about').toggle();
    });
  } else if( $('#contact').is(':visible') ) {
    $('#contact').toggle(function() {
      $('#about').toggle();
    });
  } else {
    $('#about').toggle();
  }
});

$('#togglecontact').click(function() {
  if( $('#albums').is(':visible') ) {
    $('#albums').toggle(function() {
      $('#contact').toggle();
    });
  } else if( $('#about').is(':visible') ) {
    $('#about').toggle(function() {
      $('#contact').toggle();
    });
  } else {
    $('#contact').toggle();
  }
});

首先，如果这些效率非常低或者有更简单的方法，请告诉我。

我发现如果三个DIV都不可见，单击其中一个切换链接将显示/隐藏没有动画的相应div。但是，如果其中一个DIV是可见的，单击另一个切换链接将导致div缩小和淡化，新的扩展和淡入，这是我不想要的（至少现在）。这可以在这里看到：http://new.e17.paca.arvixe.com。

谁能告诉我为什么会这样？

谢谢！

编辑：

标记在这里：

<body>
  <div id="main">
    <div id="nav">
      <div id="menu">
        <ul>
          <li><a href="#" id="togglealbums">Albums</a></li>
          <li><a href="#" id="toggleabout">About Me</a></li>
          <li><a href="#" id="togglecontact">Contact</a></li>
        </ul>
      </div>
    </div>
    <div id="albums">
      Albums go here
    </div>
    <div id="about">
      About info goes here
    </div>
    <div id="contact">
      Contact info goes here
    </div>
  </div>
</body>

Answer 1

你的收缩和淡入淡出是因为，如果给.toggle()一个回调函数，它会假设你想要设置切换器的动画而不是仅仅打开/关闭它。（根据the docs，在撰写本文时，只有在你提供持续时间时才会发生这种情况。我已经提交了一份有关此问题的错误报告。）

有关此示例的简要示例，请参阅http://jsfiddle.net/mblase75/byKeP/1/。要解决它，只需删除回调并将相同的代码放在函数的下一行。

至于简化代码，课程是你的朋友。 HTML：

<a href="#" class="togglelink" data-block="albums" id="togglealbums">toggle albums</a>
<a href="#" class="togglelink" data-block="about" id="toggleabout">toggle about</a>
<a href="#" class="togglelink" data-block="contact" id="togglecontact">toggle contact</a>

<div class="toggleblock" id="albums">ALBUMS</div>
<div class="toggleblock" id="about">ABOUT</div>
<div class="toggleblock" id="contact">CONTACT</div>

请注意data-属性，jQuery将通过.data()方法解析并使其可访问。这样可以轻松地在超链接本身上存储唯一的div ID，从而极大地简化了我们的JavaScript。 JS：

$('.togglelink').on('click',function(e) {
    var id = $(this).data('block');
    $('#'+id).toggle().siblings('.toggleblock').hide();
});

http://jsfiddle.net/mblase75/byKeP/

当我不想要它时，jQuery toggle（）动画？

1 个答案: