0

我有 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 缩小和淡入，而新的 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>
4

1 回答 1

2

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

请参阅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()方法访问的属性。这使得在超链接本身上存储唯一 ID 变得很容易div，从而极大地简化了我们的 JavaScript。JS：

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

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

于 2012-10-30T18:11:46.877 回答