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來完美工作。