0

抱歉，如果这是一个愚蠢的问题，我对 JS/JQuery 很陌生，不知道我的问题是否有一个简单的答案。

我有两个切换 div 设置或多或少如下（这是精简版）：

<div id="top-story-panel">
  <div id="story-toggle">
    <ul>
      <li id="top-stories">
        <a href="#" class="current-link">Top Stories</a>  
      </li>
      <li id="toc">
        <a href="#">All Stories</a>
      </li>
    </ul>  
  </div> 
</div>

<div id="toc-panel">
  <div id="story-toggle">
    <ul>
      <li id="top-stories">
        <a href="#" class="current-link">Top Stories</a>  
      </li>
      <li id="toc">
        <a href="#">All Stories</a>
      </li>
    </ul>  
  </div>
</div>

使用此功能，两个 div 可以顺畅地来回切换，但是如果您单击其中一个切换（分别为“热门故事”/“所有故事”），然后再次单击它，它会隐藏它刚刚显示的 div 和...找不到其他东西来代替它。两个 div 现在都被隐藏了，用户无法与任何一个 div 交互。

jQuery(function($) {
var $contentPanel= $('#top-stories-panel, #toc-panel')
    $toggle= $("#top-stories, #toc");

$toggle.on('click', function(e) {
    var $id;
    e.preventDefault();
    $icons.removeClass('hidden');
    $id=$('#'+this.id+'-panel'); //get menu id 
    $contentPanel.fadeOut(10);
    if(! $id.is(':visible')) {
        $id.fadeIn(450)
            preloadImages: 'all';
        $(this).addClass('hidden');
    }
    });
});

我假设如果我将切换放置在它们各自的 div 之外，我不会遇到这个问题 - 但是是否有代码解决方法可以让切换保持在 div 内？

非常感谢您的所有帮助；_；

4

0 回答 0