点击div

时间：2018-01-04 12:24:15

标签： javascript jquery html css

我正在设计一个类似手风琴的布局，并希望在我点击div时切换我显示的箭头图标。我能够切换div的内容。我想用箭头图标做同样的事情。

这是我到目前为止所尝试过的。

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

我希望右键图标在点击问题时切换到向下图标。当我再次点击时，它应该切换回左图标。由于它是一个FAQ页面，我将有多个问题和答案。所以我想为每个人做这件事。

5 个答案:

答案 0 :(得分：4)

您可以在.fa上切换活动课程以旋转动画图标。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(this).find(".fa").toggleClass('active');
  });
});
＆＃13; 
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

.fa {
  transition: transform .2s;
}

.fa.active {
  transform: rotateZ(90deg);
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

只需将fa-chevron-right班级切换为fa-chevron-down班级即可。 我已将$('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" );此行和chevron ID添加到i代码。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" );
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});
＆＃13; 
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" id="chevron" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

    $(document).ready(function() {
      $(this).on("click", ".koh-faq-question", function() {
        $(this).parent().find(".koh-faq-answer").toggle();
        $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
      });
    });
    .koh-faqs-page-title {
      font-family: Nexa W01 Heavy;
      font-size: 30px;
      color: #04202E;
      font-weight: 700;
    }

    .koh-faq-question-span {
      font-family: Helvetica Neue LT Pro Roman !important;
      font-size: 16px !important;
      color: #000 !important;
      font-weight: 700 !important;
      display: inline-block;
    }

    .koh-faq-answer {
      font-family: Helvetica Neue LT Pro Roman;
      color: #000;
      font-weight: 400;
      display: none;
    }

    .icon {
      font-size: 10px;
      padding-right: 5px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="koh-tab-content">
      <div class="koh-tab-content-body">
        <div class="koh-faq">
          <div class="koh-faq-question">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
            <span class="koh-faq-question-span"> Test Question 1 </span>
          </div>
          <div class="koh-faq-answer">
            Test Answer 1
          </div>
        </div>
      </div>
    </div>

答案 3 :(得分：1)

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(".fa-chevron-right").toggleClass("fa-chevron-down");
  });
});
＆＃13; 
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

虽然到目前为止所有的答案都很好，并且会完成工作，但我建议你只使用one css state class来完成所有的样式。此外，我们应该尽可能地概括事物，以便解决方案可以轻松应用于其他所有项目，因为手风琴很常见。

您可以使用BEM标准，但不要求 - ＆gt; http://getbem.com/introduction/

步骤如下：

  1. 为每个手风琴项目都有一个包装器，并定义了文本和切换btn

  2. 有一个className＆＃39;有效＆＃39; || ＆＃39;开放＆＃39; ||任何和样式（隐藏，显示，旋转等）文本和使用该类切换btn，如下所示：.accordion-item.active .toggle-btn { your stlyes here }

  3. 使用JS在父（.accordion-item）上添加切换类名，方法是单击切换btn。

    4. 请在此处查看完整的工作示例 - ＆gt; https://codepen.io/nikolamitic/pen/PEqqZa

    <强> HTML     

      <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

</ul>

    <强> CSS 

    // default states
.accordion-item {
  &__paragraph {
    display: none;
  }
  &__btn {
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-plus-round-128.png');
    // You don't need to use bg image, you can use any what ever.
  }
}

// active states
.accordion-item--active {
  .accordion-item__paragraph {
    display: block;
  }
  .accordion-item__btn {
    background-image: url('http://cdn.onlinewebfonts.com/svg/img_161345.png');
  }
    // You don't need to use bg image, you can use apply any other css property ali transofrms or opacity or whaever.

}





// Example related styles - don't make an efort reading them

.accordion {
  width: 600px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.accordition-item__title {
  display: inline-block;
  margin: 0;
}

.accordion-item__btn {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    cursor: pointer;
}
.accordition-item {
  padding: 10px 0;
}

    <强> JS 

    const $accordionBtn = $('.accordion-item__btn');

$accordionBtn.on('click', (event) => {
  const $clickedAccordionItem = $(event.currentTarget).parents('.accordion-item');
  $clickedAccordionItem.toggleClass('accordion-item--active');
});

// So here we are using only one modifier and the rest of elemets needs to be modified with it using css with only two level nesting. It is per BEM so it is a safe.
// see --> http://getbem.com/naming/ section modifiers
相关问题
最新问题