解决问题的基本思路是，您需要跟踪单击的元素，并需要基于跟踪的元素添加业务逻辑。例如，在我的解决方案中，如果内容显示，我将向单击的项添加一个活动类，如果内容隐藏，则删除活动类。我已经检查了用户单击它时的活动类。如果有一个已经存在的活动类，那么我们需要删除它，还需要删除它的兄弟类filteropacity。有关示例，请参见以下示例。

$(function() {
  $('.showSingle a').off("click").on("click", function() {
    $(this).siblings().removeClass("active");
    if ($(this).hasClass("active")) {
      $(this).removeClass("active");
      $(this).siblings().removeClass('filteropacity');
    } else {
      $(this).addClass("active").removeClass("filteropacity");
      $(this).siblings().addClass('filteropacity');
    }

    $('.targetDiv').not('#div' + $(this).attr('data-target')).hide();
    $('#div' + $(this).attr('data-target')).toggle();
    //$('.showSingle a').not('#color' + $(this).attr('data-target')).addClass('filteropacity')
    //$('#color' + $(this).attr('data-target')).removeClass('filteropacity');
  });
});

.filteropacity {
  opacity: .5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showSingle">
  <a class="link1" id="color1" data-target="1">Div 1</a>
  <a class="link2" id="color2" data-target="2">Div 2</a>
  <a class="link3" id="color3" data-target="3">Div 3</a>
  <a class="link4" id="color4" data-target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

根据您在codepen（https://codepen.io/bastia-g5/pen/RwqLdzO）中提供的代码，我用以下代码更新了它。在这段代码中，我存储了父元素，即单击元素<div id="boh" class="showSingle">的父元素，并使用了它的兄弟元素。

$(function() {
  $('.showSingle a').off("click").on("click", function() {
    $parentElement = $(this).closest(".showSingle");
    $parentElement.siblings(".showSingle").removeClass("active");
    if ($parentElement.hasClass("active")) {
      $parentElement.removeClass("active");
      $parentElement.siblings(".showSingle").removeClass('filteropacity');
    } else {
      $parentElement.addClass("active").removeClass("filteropacity");
      $parentElement.siblings(".showSingle").addClass('filteropacity');
    }

    $('.targetDiv').not('#div' + $(this).attr('data-target')).hide();
    $('#div' + $(this).attr('data-target')).toggle();
  });

});

.filteropacity {
  opacity: .5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boh" class="showSingle">
  <a class="link1" id="color1" data-target="1">Div 1</a>
</div>
<div id="boh" class="showSingle">
  <a class="link2" id="color2" data-target="2">Div 2</a>
</div>
<div id="boh" class="showSingle">
  <a class="link3" id="color3" data-target="3">Div 3</a>
</div>
<div id="boh" class="showSingle">
  <a class="link4" id="color4" data-target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>