framework7自定义手风琴切换图标

Question

我复制了documentation样本自定义手风琴元素，只是修改了它的图标，但我无法使图标切换工作。

我想要的是，当物品没有展开时，它会显示“+”。 如果展开，它将显示“ - ”。

但现在，总是显示加号和减号。

以下是截图：

元素：

自定义手风琴

<div class="content-block accordion-list custom-accordion"> 
     <div class="accordion-item"> 
      <div class="accordion-item-toggle"> 
       <i class="f7-icons">add_round</i> 
       <i class="f7-icons">delete_round</i> 
       <span>Item 1</span> 
      </div> 
      <div class="accordion-item-content"> 
       <p>Item 1 content. Lorem ipsum dolor sit amet...</p> 
      </div> 
     </div> 
     <div class="accordion-item"> 
      <div class="accordion-item-toggle"> 
       <i class="f7-icons">add_round</i> 
       <i class="f7-icons">delete_round</i> 
       <span>Item 2</span> 
      </div> 
      <div class="accordion-item-content"> 
       <p>Item 2 content. Lorem ipsum dolor sit amet...</p> 
      </div> 
     </div> 
    </div> 

我需要添加一些jQuery的/ javascript来使这项工作？或者这已经包含在框架中？

Answer 1

您正在使用的CSS可能有所帮助，但这是我在某些时候回到类似需求时所做的。

HTML：

<div class="accordion_container"> 
    <div class="accordion_head">First Accordian Head<span class="plusminus">+</span></div> 
    <div class="accordion_body" style="display: none;"> 
    <p>First Accordian Body, it will have description</p> 
    </div> 
    <div class="accordion_head">Second Accordian Head<span class="plusminus">+</span></div> 
    <div class="accordion_body" style="display: none;"> 
    <p>Second Accordian Body, it will have description</p> 
    </div> 
    <div class="accordion_head">Third Accordian Head<span class="plusminus">+</span></div> 
    <div class="accordion_body" style="display: none;"> 
    <p>Third Accordian Body, it will have description</p> 
    </div> 
</div> 

CSS：

.accordion_container { 
    width: 500px; 
} 

.accordion_head { 
    background-color: skyblue; 
    color: white; 
    cursor: pointer; 
    font-family: arial; 
    font-size: 14px; 
    margin: 0 0 1px 0; 
    padding: 7px 11px; 
    font-weight: bold; 
} 

.accordion_body { 
    background: lightgray; 
} 

.accordion_body p { 
    padding: 18px 5px; 
    margin: 0px; 
} 

.plusminus { 
    float: right; 
} 

的jQuery：

$(document).ready(function() { 
    //toggle the component with class accordion_body 
    $(".accordion_head").click(function() { 
    if ($('.accordion_body').is(':visible')) { 
     $(".accordion_body").slideUp(300); 
     $(".plusminus").text('+'); 
    } 
    if ($(this).next(".accordion_body").is(':visible')) { 
     $(this).next(".accordion_body").slideUp(300); 
     $(this).children(".plusminus").text('+'); 
    } else { 
     $(this).next(".accordion_body").slideDown(300); 
     $(this).children(".plusminus").text('-'); 
    } 
    }); 
}); 

Ĵ SFiddle：http://jsfiddle.net/nikdtu/3amzhp6z/

Answer 2

手风琴已经包含在名为accordion.js的框架中。你的代码已经包含了html和css，现在它需要一些js来完美工作。