Question

我有以下代码来显示和隐藏div但是如果我想点击图像我可以添加类但是如果我想通过单击图像将其删除，那么它将再次打开它。任何人都可以向我解释这是如何工作的吗？

$(document).ready(function() {
    function close_answer_section() {
        $('.question-text').removeClass('active');
        $('.answer-section-content').slideUp(300).removeClass('open');
    }

    $('.question-text').click(function(e) {
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_answer_section();
        }else {
            close_answer_section();

            $(this).addClass('active');
            $('.questions ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

Answer 1

您可以看到，当您点击img时，e.target为<img>，因为它没有类.active，它将始终触发错误部分。< / p>

解决方案，改变

if($(e.target).is('.active')) {

到

if($(this).is('.active')) {

请参阅jsFiddle

Answer 2

您可以使用当前slideToggle()上的.answer-section-content和其他所有内容slideUp()来大大简化您的逻辑：

$('.question-text').click(function() {
  var answer= $(this).next('.answer-section-content');
  answer.slideToggle(300); 
  $('.answer-section-content').not(answer).slideUp(300);
});

这允许您从答案中删除ID，并从div中删除href。

$(document).ready(function() {
  $('.question-text').click(function() {
    var answer= $(this).next('.answer-section-content');
    answer.slideToggle(300); 
    $('.answer-section-content').not(answer).slideUp(300);
  });
});

body{ background: black };
.questions{
  padding-top: 25px;
  padding-left: 170px;
  padding-bottom: 25px;
}
.question{
  padding: 5px;
  font-size: 18px;
  font-weight: 100;
  color: #ffffff;
}
.answer-section-content {
  display:none;
  padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
  <div class="question">
    <div class="question-text">
      <img src="images/plus-eclipse.png">Question 1</div>
    <div class="answer-section-content">
      <p>Answer 1</p>
    </div>
  </div>
  <div class="question">
    <div class="question-text">
      <img src="images/plus-eclipse.png" />Question 2</div>
    <div class="answer-section-content">
      <p>Answer 2</p>
    </div>
  </div>
</div>

如何＆＃34;删除课程＆＃34;用jQuery？

2 个答案: