如何在 mootools 上 FX.Accordion

Question

我正在创建一个带有手风琴的结帐页面设计。我的雇主只允许将 mootools 作为他们的 js 框架，并且不希望在他们的应用程序中使用 jquery。我将 BehaviorUI 用于前端框架，因为它是 bootstrap 的副本，但基于 mootools 构建。唯一的问题是我在为下一个手风琴创建 next/continue 按钮时遇到了问题。

这是我到目前为止尝试过的方法，但没有成功：

<div class="panel-group checkout-accordion" id="accordion" data-behavior="Accordion" data-accordion-options="'headers': 'a.accordion-toggle', 'sections': '.panel-collapse'">        
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="accordion-toggle"><span class="badge pull-left custom-badge">1</span>
                   <h3 class="panel-title"> Checkout Method </h3>
                </a>
            </div>
            <div id="step1" class="panel-collapse">
                <div class="panel-body">
                    <h3>You're Logged in as Erica!</h3>
                    <a href="#" class="btn btn-primary btn-sm pull-right" data-trigger="reveal" data-reveal-target="!.panel-group .panel #step2">Continue <i class="glyphicon glyphicon-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <div class="panel panel-default" id="test">
            <div class="panel-heading">                    
                <a class="accordion-toggle"><span class="badge pull-left custom-badge">2</span>
                    <h3 class="panel-title">Shipping Method</h3>
                </a>                    
            </div>
            <div id="step2" class="panel-collapse">
                <div class="panel-body">
                    <h3>Destination State And Zip Code</h3>
                    <div class="form-group">
                        <label for="state" class="control-label">State</label>
                        <select id="state" class="no-flat-select form-control">
                            <option value="0" selected="selected">Select State</option>
                            <option value="1">Florida</option>
                            <option value="2">Arkansas</option>
                            <option value="3">Alaska</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="zip" class="control-label">Zip Code</label>
                        <input type="text" class="form-control" id="zip" placeholder="Zip Code">
                    </div>
                    <a href="#" class="btn btn-primary btn-sm pull-right">Continue <i class="glyphicon glyphicon-arrow-right"></i></a>
                </div>
            </div>
        </div>
</div>

进一步解释我的目标是什么。这是一张可能有帮助的图片 - link to image

Answer 1

看看 Behavior.Accordion.js 正在做什么可能会有所帮助 (source here on github)

它所做的只是为您创建一个 Fx.Accordion 的实例。您对 reveal 委托器的使用有点超出手风琴的范围，因为它独立地知道如何显示内容，但它不会调用任何 Fx.Accordion 的方法（这将'隐藏第一部分）。

没问题。只需写一个新的委托人！

http://jsfiddle.net/4y5sLt5d/

Delegator.register('click', {
  'showAccordionSection': {
    requireAs: {
      // gotta tell it which section you want to show
      target: String
    },
    defaults: {
      // how to find the accordion instance
      // by convention, all selectors are relative to the element with
      // the trigger. this default assumes the clicked element is inside
      // the accordion.
      accordionSelector: '![data-behavior*=Accordion]'
    },
    handler: function(event, element, api){
      // find the target section to show
      var target = api.getElement('target');
      // we gotta find the accordion instance, so we look for
      var accordionElement = api.getElement('accordionSelector');
      // get the accordion instance from the element, created by Behavior
      var accordionInstance = accordionElement.getBehaviorResult('Accordion');
      // no accordion found? fail quietly
      if (!accordionInstance) api.fail('Could not retrieve Fx.Accordion instance from element', accordionElement);
      // not a section of the accordion? fail quietly
      if (accordionInstance.elements.indexOf(target) < 0) api.fail('Target element is not an accordion section', target);
      // show it!
      accordionInstance.display(target);
    }
  }
});

只需将其放入您网站的 javascript 中的任意位置（当然是在 Delegator 之后）就可以了。

如何在 mootools 上 FX.Accordion

How to FX.Accordion on mootools

javascript

mootools

accordion

behavior-ui