如何通过单击另一个来制作切换元素，并在单击另一个元素时重新切换它？

Question

这件事似乎很容易，但是我在jQuery上还是很新

想象一下，我想单击一个div，它使另一个标签（p）出现（切换），同时，第三个div（已显示）更改颜色（例如变为红色）。 这很容易，我想我做到了。 问题是我希望具有相同的机制：在另一个div中单击时，出现另一个，第3 div变红（也完成）但是如何使第一个s重置为第一次（第2 div）隐藏，第三个不会是红色）一个接一个（在我的示例中，两个div都显示红色）

<div class="container">
 <div class="text" id="text-1" data-elem="text-1-too"> text 1 </div>
<p class="text-1-too" id="text-1-too" style="display:none;">text 1 too</p>
<div class="color" id="color-1">color</div>
 </div>

 <div class="container">
 <div class="text" id="text-2" data-elem="text-2-too"> text 2 </div>
 <p class="text-2-too" id="text-2-too" style="display:none;">text 2 too</p>
 <div class="color" id="color-2">color</div>
 </div>

.text{

margin-left:150px;
 }

.text-too{
margin-left:150px;
}

.new-color{
 color:red;
 }

$('.text').click(function(){

                var elemID = $(this).data('elem');
                var elem = $('#' + elemID);
                elem.slideToggle();

                $('.color').toggleClass("new-color");
            });

这是我在这里完成的非常基本的代码

Answer 1

尝试这个

$('.text').click(function(){
    $('p').not($(this).parent().find('p')).slideUp();
    $(this).parent().find('p').slideToggle();
    $('.color').not($(this).parent().find('.color')).removeClass("new-color");  
   $(this).parent().find('.color').toggleClass("new-color");
});

演示

Answer 2

$('.text').click(function(){
  var elemID = $(this).data('elem');
  if(elemID=='text-1-too'){
      $('#text-2-too').slideToggle();
  }
  else{
      $('#text-1-too').slideToggle();
  }
  $('.color').removeClass("new-color");
  $(this).parent().find('.color').addClass("new-color");
});

看起来这就是您所期望的...请在此处参考演示， JSFIDDLE DEMO