Question

预期功能：

如果单击触发器，则必须显示相应的元素
如果您单击另一个触发器，则会显示该触发器的元素，而另一个触发器将关闭
如果您在触发器打开时单击它，它只会关闭元素

当前问题：

现在，单击触发器后显示的目标元素符合上述要求，但触发器本身似乎没有采用“活动”类。按下时，触发器应变为红色（表示它具有“活动”类）。

html：

<ul>
    <li>
         <span class="trigger" data-target-id="target-1">Trigger 1</span>
         <div id="target-1" class="target">Target to reveal when I press Trigger 1</div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-2">Trigger 2</span>
         <div id="target-2" class="target">Target to reveal when I press Trigger 2</div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-3">Trigger 3</span>
    </li>
</ul>

<div id="target-3" class="target">Target to reveal when I press Trigger 3</div>

和jQuery：

var trigger = ".trigger";
var recipient = ".target";
var not_trigger = $(".trigger").not(this);

$(trigger).click(function(e) {
  e.stopPropagation();
  recipient = '#' + $(this).attr('data-target-id');
  var not_recipient = $(".target").not(recipient);

// This handles the trigger element      

  if($(trigger).hasClass("active")){
    $(not_trigger).removeClass("active");
  }else{
    $(this).addClass("active");
  }

// This disgracefully handles the recipient element 

  if($(".target").hasClass("open")){
    $(not_recipient).removeClass("open");
    TweenMax.to($(".target"), .3, {display:'none', y:'0%', autoAlpha:0});

    if($(recipient).hasClass("open")){
      $(recipient).removeClass("open");
      TweenMax.to(recipient, .3, {display:'none', y:'0%', autoAlpha:0});
    }else{
      $(recipient).addClass("open");
      TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1});
    }
  }else {
    $(recipient).addClass("open");
    TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1});
  }

});

Answer 1

您粘贴的代码中的问题是它永远不会进入"spring-redis://localhost:6379?redisTemplate=#redisTemplateBean"块，因为该元素在点击发生时没有if类。

替换

active

带

 if($(trigger).hasClass("active")){
    $(not_trigger).removeClass("active");
    $(this).toggleClass("active") ;
  }

使用相同代码使其工作的一种方法是，在$(trigger).not(this).removeClass("active"); $(this).toggleClass("active");中将li.trigger设置为active。但这仍然不能解释自我点击。

<强> jsBin Demo

Answer 2

解决此问题的最简单方法是在点击其中一个触发器时将active类从所有触发器中删除，并将其添加到当前触发器中：

if($(trigger).hasClass("active")){
    $(trigger).removeClass("active");
}
$(this).addClass("active");

修改切换如果当前选中：

if($(trigger).hasClass("active")){ $(trigger).not(this).removeClass("active"); } $(this).toggleClass("active") ;

CodePen

触发器不采用活动类

2 个答案: