Question

我手风琴切换菜单目前做得不多。您单击它，它会打开和关闭。但是，我希望它显示一个＆＃34; +＆＃34;关闭时，＆＃34; - ＆＃34;什么时候开目前第一个手风琴默认打开并显示一个X，第二个手风琴默认为+但是在打开和关闭之后没有任何改变。

目前代码看起来像

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

，CSS看起来像

#solution-accordion .accordion-toggle:after {
content: "+";
position: absolute;
right: 0;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}

#solution-accordion .accordion-toggle.accordion-active:after {
content: "+";
position: absolute;
right: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform-origin: middle center;
-ms-transform-origin: middle center;
transform-origin: middle center;
}

只有手风琴的js是

 $('#solution-accordion').find('.accordion-toggle').click(function(){
   //Expand or collapse this panel
   $(this).next().slideToggle(500);
   //Hide the other panels
   $(".accordion-content").not($(this).next()).slideUp(500);
 });

切换菜单的代码

 // solution page accordion
  $('#solution-accordion').find('.accordion-toggle').click(function(){
  //Expand or collapse this panel
  $(this).next().slideToggle(500);
  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp(500);
  });

这是我为它创建的小提琴http://jsfiddle.net/WteTy/151/

我不是这个项目的ui开发人员，我只是应该进行迁移，但有人指出了这一点，我想为他们解决这个问题。感谢

Answer 1

整个过程中的某些事情应该是仅在扩展的手风琴项目上设置“accordion-active”类。它看起来像是打算在折叠时显示“+”，然后在打开时显示“x”。您可以将CSS中的“x”更改为“ - ”并删除45度的旋转。

无论哪种方式，我都会先解决他们试图加入手风琴活动课程的问题。

从所有其他元素中删除该类，然后添加它，如果它应该只用于扩展的那个元素。

jsfiddle：http://jsfiddle.net/330nb5hk/1/

 $('#solution-accordion').find('.accordion-toggle').click(function(){
     //Expand or collapse this panel
     $('.accordion-toggle').removeClass("accordion-active");
     if($(this).next().is(":hidden")) {
       $(this).addClass("accordion-active");
     }
     $(this).next().slideToggle(500);
     //Hide the other panels
     $(".accordion-content").not($(this).next()).slideUp(500);
   });

使用CSS切换内容

1 个答案: