在手风琴上旋转单个 V 形.

Question

我希望一个 V 形在单击相应的标题时旋转。截至目前，所有 V 形都在旋转。我想我必须指定哪个 V 形，但我不知道如何。我正在使用 ASP.NET MVC 5 中工作，我正在使用剃刀视图来通过列表进行搜索。

指数

@{
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>
}
}

用于旋转 V 形的 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>

Answer 1

$(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>