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，当您想要显示它时，请附加类{{1 }}

如果这可以解决您的问题，请告诉我们！

＆＃13;

active

＆＃13;

$("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');
  }
});

＆＃13;

.wrapper article {
  display: none;
}

article.active {
  display: block;
}

＆＃13;

Answer 2

这应该在不破坏其他功能的情况下隐藏文章：

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

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

2 个答案: