javascript - 切换 div，如果已经打开则隐藏

Question

我正在尝试构建一个切换面板，一旦打开，如果再次单击事件元素，它就会关闭，但如果单击同级元素，则内容会更新，只有我得到了混合结果。谁能看出我哪里出错了？

https://jsfiddle.net/9b3mecc2/

$('.sectors-list li').on('click', function(e){
  e.preventDefault(); 
  var order = $(this).index(); 
  $('.sub-sectors div').hide();
  $('.sub-sectors div').eq(order).show(); 
  if($('.digital-sectors').is(':visible')
  && order === 0){
    $('.sub-sectors').removeClass('active'); 
  } else {
      $('.sub-sectors').addClass('active'); 
  } 
});

Answer 1

您尝试做的并不复杂，只是您的代码缺少从事件元素到要显示的元素的引用，因此您可以使用 css，使用伪选择器 : target

检查文档 :target

Browser support list

div{ display: none; }
div:target{ display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href='#data-foo'>foo</a></li>
  <li><a href='#data-bar'>bar</a></li>
</ul>
<div id='data-foo'>data foo</div>
<div id='data-bar'>data bar</div>