Question

我正在研究手风琴专家组。他们都打开很好，但我无法弄清楚如何让他们打开另一个元素。

以下是我正在处理的代码：

var myBubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: data,
    options: options
});

getData() //some method to obtain the datapoints
    .then(function (result) {

        for (var i = 0; i < result.length; i++) {
            setTimeout(function (myBubbleChart, result) {
                myBubbleChart.data.datasets[0].data[0] = result;
                myBubbleChart.update();
            }, 10 * i, myBubbleChart, result[i]);
        }

});

我试图创建新的id以调用JS / JQuery代码，但似乎没有任何工作。

<div class="container">
  <div class="row">
    <div id="trickslist">
      <ul>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <div>
              <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
            </div>
          </a>
          <div class="detail">

          </div>
        </li>           
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
          </a>
          <div class="detail">

          </div>
        </li>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
          </a>
          <div class="detail">

          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

我认为这是在我的剧本中，但我并不是百分之百地说我做错了。

Answer 1

从你的小提琴我现在看不到任何东西正在扩展，但有一个简单的技巧来实现这个功能：点击隐藏所有，而不是显示那个特定。

$(".expand").click(function(){
    $(".detail").collaps();
    $(this).parent().find(".detail").expand();
});

Answer 2

我更新了你的小提琴，希望能解决你的问题=）这是jQuery。查看Fiddle

$(".expand").on("click", function () {
    $(".right-arrow").text("+");
    $(".detail:visible").slideUp();
    if(!$(this).next().is(":visible")){

        $(this).next().slideDown(200);
        $(this).find(".right-arrow").text("-");
    }
});

[EDITED]

在“.expand”元素单击事件中，所有手风琴将返回其初始状态，关闭并使用右侧的加号。手风琴的详细部分仅在手风琴关闭时才会出现，以防止手风琴在打开时被隐藏和出现。如果手风琴关闭，将出现细节部分，加号将变为减号。

Answer 3

使用已具有此功能的库，为您节省大量时间，精力和维护。 jQuery UI和Kendo UI都经过了测试和测试，并被世界各地的开发人员使用。其他人已经解决了问题。工作聪明！（我也不适用。）

https://jqueryui.com/accordion/

http://demos.telerik.com/kendo-ui/panelbar/api

当另一个打开时关闭手风琴面板

3 个答案: