Question

我正在尝试构建一个曾经打开的切换面板，如果再次单击活动元素，它会关闭，如果单击兄弟元素，则内容更新只有我有混合结果。任何人都可以看到我出错的地方吗？

$('.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

你尝试做的并不复杂，只是你的代码缺少从event元素到要显示的元素的引用，所以你可以使用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>

Answer 2

我认为这样可行。

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

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

2 个答案: