jquery - 改善辅助功能 : Customising Accordion jQuery and HTML?

Question

简介:

我正在使用本地安装的 WordPress 的高级响应式主题。

主题提供了一个基于 jQuery 1.11.0 的 Accordion ShortCode。

问题:

通过我在 ShortCode 中内联添加的 12 点列表，移动用户需要做一些向上滚动手势才能到达页面顶部以关闭冗长的 Accordion 项目，以便腾出空间来查看其他 Accordion 导航选项。

目标:

为了改进可访问性，我想通过在每个冗长的 Accordion 项目底部添加“关闭”链接来自定义 HTML 和 jQuery。

问题:

我无法获得额外的 <div id="close-title" class="close-title">CLOSE ^^</div>放置在每个 Accordion 项的底部时起作用。

我尝试解决这个问题:

我添加了一个名为“closer”的变量' 到打开的 jQuery 函数，这似乎在 DIV 元素与 CSS 类 .close-title 时起作用嵌套在类 .toggle-title 中. Accordion 函数的片段:

/*  ACCORDION
/*====================================================================*/

    (function($){

        $('.accordion').each(function(){
            var $this = $(this),

                title = $this.find('.toggle-title'),
                closer =  $this.find('.close-title'),
                content =  $this.find('.toggle-content');


                if($this.hasClass('collapsible-yes')){
                    $this.find('.active:not(:first)').removeClass("active");
                }
....
....

事实上，类.close-title的DIV元素行为与 .toggle-title-header 完全相同当嵌套在类 .toggle-title 中时，这很好地表明我在正确的轨道上。

当我说“行为”时，我指的是标题选项卡的功能方式及其“+”和“-”，它们是打开和关闭状态的指示器，每个 Accordion 项目打开和关闭点击。

我相信 jQuery 脚本似乎无法找到类为 .close-title 的 DIV 元素当它嵌套在 DIV 元素以外的任何地方时 .toggle-title .

注意:请参阅 Accordion with Title: 'Trustee role description' in JSBin example 以查看此嵌套相关点的演示。

我的问题:

如何通过单击“关闭”调用用于切换每个菜单项的相同函数，以及如何通过放置 <div id="close-title" class="close-title">CLOSE ^^</div> 来实现此目的在 Accordion 项目的底部？

JSBin 示例:

我有这个 JSBin 示例:http://jsbin.com/yonox/2/edit - 你会注意到一个带有 id 和类的 DIV 元素:.close-title .嵌套在评论 <!--START ACCORDION TAB 3--> 的顶部和底部.放在顶部的 DIV 有效，底部的 DIV 无效。

有人可以演示我如何使这个元素以与“标题 +/-”元素相同的方式切换项目，因为理想情况下，这个元素应该位于每个 Accordion 项目的底部。

为了我们的信息，这里是 Accordion 菜单的原始短代码的片段:

[accordion collapsible="yes no"]

[toggle title="What do I need to know if I’m thinking of becoming a trustee?" open="no"]

Charity Trustees are responsible for controlling the management and administration of the charity. In general terms trustees are responsible for the proper administration of the charity in accordance with the law, and its trusts as set out in the governing document.

Their overriding duty is to pursue the objectives of the charity and ensure that income and property are used exclusively for these objectives.

The general duties of a trustee are set out in the common law and statute.

[/toggle]

Answer 1

这种问题有很多解决方案，我试图列出的解决方案之一，就这样

在冗长的 toggle-content div 中添加一个 close me div 作为:

<div class="close-me" style="color:red;">Close Me ^ </div>    

注意:请确保您已将此 close me div 插入到您的 toggle-content div 中，并且必须是 toggle-content div 的最后一个子元素。

并在您的 java 脚本文件末尾添加以下内容:

$('.close-me').click(function(){
  $(this).parent('div.toggle-content').prev().click();
});

我希望这些解决方案可以解决您的问题。