javascript - 在 Accordion 上旋转单个人字形

当您单击相应的标题时，我希望一个V形臂旋转。到目前为止，所有的人字形都在旋转。我认为我必须指定人字形，但不知道如何。我正在ASP.NET MVC 5中工作，并且正在使用razor视图遍历列表。


  指数

    @{
    foreach (var item in Model)
    {
        <div class="accordion">
            <a href="#"><h4>@item.Title</h4><i class="fa fa-chevron-right rotate"></i></a>
        </div>
        <div class="accordion-desc">
            <h3>@Resource.AccordionProjectLead</h3>
            <h4>Kay Wiberg</h4>
            <h3>@Resource.AccordionDescription</h3>
            <p>
            @item.Description
            <p>
            <div class ="link">
                <a href="@item.Url">@Resource.AccordionGoTo</a>
            </div>
        </div>
    }
}

  旋转人字形的CSS

.rotate {
  -moz-transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.rotate.down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

  JS手风琴和人字形

$(document).ready(function() {
  $(".accordion-desc").fadeOut(0);
  $(".accordion").click(function() {
    $(".accordion-desc").not($(this).next()).slideUp('fast');
    $(this).next().slideToggle(400);
  });
});

$(".accordion").click(function() {
  $(".rotate").toggleClass("down");
});

  从浏览器中：

<div class="container">
  <div class="accordion">
    <a href="#">
      <h4>Test Site</h4><i class="fa fa-chevron-right rotate down"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>

    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>
  <div class="accordion">
    <a href="#">
      <h4>Test site 2</h4><i class="fa fa-chevron-right rotate"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>
      Somthindsyvgds
    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>

</div>

最佳答案

$(document).ready(function() {
  $(".accordion-desc").fadeOut(0);
  $(".accordion").click(function() {
    $(".accordion-desc").not($(this).next()).slideUp('fast');
    $(this).next().slideToggle(400);
  });
});

$(".accordion").click(function() {
  $(".accordion").not(this).find(".rotate").removeClass("down");
  $(this).find(".rotate").toggleClass("down");
});

.rotate {
  -moz-transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.rotate.down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.accordion {
background: blue;
}
.fa, h4 {
color: white;
}

<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"/>
<div class="container">
  <div class="accordion">
    <a href="#">
      <h4>Test Site</h4><i class="fa fa-chevron-right rotate down"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>

    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>
  <div class="accordion">
    <a href="#">
      <h4>Test site 2</h4><i class="fa fa-chevron-right rotate"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>
      Somthindsyvgds
    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>

</div>