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('-');
    }
  });
});

JSFiddle： http://jsfiddle.net/nikdtu/3amzhp6z/

Answer 2

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

framework7自定义手风琴切换图标

2 个答案: