Question

我有一个有四个部分的手风琴。每个部分都有一个插入符号。我希望每个插入符号在单击其部分时旋转180度。单击手风琴部分时，它将在其下方显示一个段落。第一段已经显示。

HTML

<div class="accordion">
                <a href=""><div class="wow fadeInRight">Discovery <b class="caret"></b></div></a>
                <p class="wow fadeInRight">
                    Life is all about discovery. For me, this could be anything from traveling to a place
                    that I've never photographed, to learning something new about myself that helps me grow as a person.
                </p>
                <a href=""><div class="wow fadeInRight">Clarity <b class="caret"></b></div></a>
                <p>Creating high quality images is an important part of every photographer's process.
                    I emphasize clarity in my photography because it allows me to capture nature's finest details.
                </p>
                <a href=""><div class="wow fadeInRight">Authenticity <b class="caret"></b></div></a>
                <p>
                    These days it can be hard to find anything that is truly authentic. I focus on nature in my photography because I believe that authentic experiences
                    must be initiated by removing yourself from the distractions of everyday life and reconnecting with nature.
                </p>
                <a href=""><div class="wow fadeInRight">Mindfullness <b class="caret"></b></div></a>
                <p>Mindfullness is a mental state achieved by focusing one's awareness on the present moment, while calmly acknowledging and accepting one's feelings, thoughts, and sensations. This is commonly used as a therapeutic technique.
                 </p>
            </div><!--end accordion-->

JQUERY

jQuery(document).ready(function() {
//Hide all panels to start
var panels = $('.accordion > p').hide();

//Show first panel on load (optional)
panels.first().show();

//On click of panel title
$('.accordion > a > div').click(function() {
    var $this = $(this);

    //slide up all other panels
    panels.slideUp();

    //slide down target panel
    $this.parent().next().slideDown();

    //flip closest caret 180 degrees
    $this.closest('.caret').css({'transform' : "rotate('180deg')"});

    return false;
});

}）;

插入符翻转码是我jquery底部的第4行

Answer 1

有一些问题。

您尚未包含CSS，但我怀疑您尚未将.caret设置为块类型元素，这是transform工作所必需的。
jQuery的closest()函数检查元素的父项，而你正在寻找一个孩子，所以你应该使用find()代替。
我的方法是在下面的示例中向active添加caret类，或者在标题div本身（可能是后者）中添加find()类。这样可以很容易地检查代码的其他部分，并避免内联样式弄乱CSS。
如果您想采用您的方法，但使用180deg，请删除<b>周围的引号（正如我在下面注释掉的代码中所做的那样）。
< / LI>
与此问题无关，但<strong>代码被认为是过时的，因此您可能会考虑使用jQuery(document).ready(function() { //Hide all panels to start var panels = $('.accordion > p').hide(); //Show first panel on load (optional) panels.first().show(); //On click of panel title $('.accordion > a > div').click(function() { var $this = $(this); $('.caret').removeClass("active"); //slide up all other panels panels.slideUp(); //slide down target panel $this.parent().next().slideDown(); $this.find('.caret').addClass("active"); /* //flip closest caret 180 degrees $this.find('.caret').css({ 'transform': "rotate(180deg)" }); */ return false; }); });代替。

无论如何，这是一个重写的例子：

.caret {
   display: inline-block;
}

.caret:after {
  content: ">";
   display: inline-block;
}

.caret.active {
   transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <a href="">
    <div class="wow fadeInRight">Discovery <strong class="caret active"></strong></div>
  </a>
  <p class="wow fadeInRight">
    Life is all about discovery. For me, this could be anything from traveling to a place that I've never photographed, to learning something new about myself that helps me grow as a person.
  </p>
  <a href="">
    <div class="wow fadeInRight">Clarity <strong class="caret"></strong></div>
  </a>
  <p>Creating high quality images is an important part of every photographer's process. I emphasize clarity in my photography because it allows me to capture nature's finest details.
  </p>
  <a href="">
    <div class="wow fadeInRight">Authenticity <strong class="caret"></strong></div>
  </a>
  <p>
    These days it can be hard to find anything that is truly authentic. I focus on nature in my photography because I believe that authentic experiences must be initiated by removing yourself from the distractions of everyday life and reconnecting with nature.
  </p>
  <a href="">
    <div class="wow fadeInRight">Mindfullness <strong class="caret"></strong></div>
  </a>
  <p>Mindfullness is a mental state achieved by focusing one's awareness on the present moment, while calmly acknowledging and accepting one's feelings, thoughts, and sensations. This is commonly used as a therapeutic technique.
  </p>
</div>
<!--end accordion-->

{{1}}

单击手风琴部分时旋转插入符

1 个答案: