两次切换和两次单击相同的功能，每次单击具有不同的行为

Question

我尝试使用 java 脚本创建一个事件，它允许我在不同的卡片之间切换以及隐藏和显示。 有一张四张卡片，当你点击第一张卡片时，它会显示卡片下方的信息，当你再次点击它时，它会隐藏它，四张卡片也是如此， 但我还希望当您单击第二张或第三张卡以防第一张卡打开时，它会自动关闭第一张卡以显示第二张卡。 又是四张卡片之间的切换事件。

我尝试再点击两次，但似乎我在两者之间造成了冲突。

我该如何解决这个问题。

这是我使用的代码：

    $("a[data-toggle]").on("click", function(e) {
      e.preventDefault();  // prevent navigating
      var selector = $(this).data("toggle");  // get corresponding element
      $("article").hide();
      $(selector).show();
    });

    article:not(#article1) {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-toggle="#article1">cart1</a>
<a href="#" data-toggle="#article2">cart 2</a>
<a href="#" data-toggle="#article3">cart 3</a>
<a href="#" data-toggle="#article4">cart 4</a>
    
<article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article>
<article id="article2">sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article>
<article id="article3">consectetur adipiscing elit, sed do eiusmod tempor</article>
<article id="article4">adipiscing elit, sed do eiusmod tempor</article>

Answer 1

这里有一个稍微修改的方法来实现你的切换功能，请为所有article元素添加一个父元素并设置为display:none，当你想显示它时，附加类active。

如果这能解决您的问题，请告诉我！

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault();
  var toggleThis = $('article' + $(this).attr('data-toggle') + '')
  if (toggleThis.hasClass('active')) {
    toggleThis.toggleClass('active');
  } else {
    $("article.active").removeClass('active');
    toggleThis.addClass('active');
  }
});

.wrapper article {
  display: none;
}

article.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-toggle="#article1">cart1</a>
<a href="#" data-toggle="#article2">cart 2</a>
<a href="#" data-toggle="#article3">cart 3</a>
<a href="#" data-toggle="#article4">cart 4</a>
<div class="wrapper">
  <article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article>
  <article id="article2" class="active">sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article>
  <article id="article3">consectetur adipiscing elit, sed do eiusmod tempor</article>
  <article id="article4">adipiscing elit, sed do eiusmod tempor</article>
</div>

Answer 2

这应该在点击时隐藏文章而不破坏其他功能：

$("article").click(function() {
    $(this).hide();
});