Question

这件事似乎很容易，但我对jQuery很新。

想象一下，我想点击一个div，它会出现另一个标签（p）（切换），同时，第三个div（已经显示）会改变颜色（例如红色）。这很容易，我想我做到了这一点。问题是我想要有相同的机制：当点击另一个div时，另一个显示，第三个div变为红色（也完成）但是如何使第一个（s）重置为第一次（第二个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");
            });

这是我已完成here

的基本代码

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

DEMO

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

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

2 个答案: