javascript - 根据当前页面 URL 打开特定的 Jquery Accordion 面板

标签 javascript jquery jquery-ui jquery-ui-accordion

我有一个 Jquery Accordion , Accordion 具有 pan、列表元素和列表元素中的 anchor 标记, anchor 标记的 href 属性具有当前页面 URL。 我只是希望当访问页面时,特定面板(包含该 anchor 标记)自动打开,并且其列表元素应该变为事件状态。我有代码可以制作 Accordion 和片段,从而制作列表元素积极的。但列表元素未激活且面板未打开。我想我严重错过了一些东西。 这是代码:

<script>
  $.ajax({
    url: "/categories",
    type: 'GET',
    success: function(data) {
      var content = "";

      content += '<div id="category-navigation">';
      for (i = 0; i < data.length; i++) {

        content += '<div class="head">';
        content += '<label class="categoryLables">' + data[i].title;
        content += '</label>';

        content += '<div>';
        content += '<div class="boardsMargin">';
        content += '<ul>';

        for (j = 0; j < data[i].assigned_boards.length; j++) {

          content += '<li>';
          content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].assigned_boards[j].id + "'>";
          content += data[i].assigned_boards[j].name;
          content += '</a>';
          content += '</li>';
        }

        content += '</ul>';
        content += '</div>';
        content += '</div>';
        content += '</div>';
      }
      content += '</div>';

      $("#myNavigation").html("");
      $("#myNavigation").html(content);

      $('.head').accordion({
        heightStyle: "content",
        active: true,
        collapsible: true
      });

      $('.head li').each(function() {
        li = $(this);
        a = $('a', li);

        myUrl = "";

        myUrl += (location.protocol + "//" + location.hostname +
          (location.port && ":" + location.port));
        myUrl += (a.attr('href'));


        if (myUrl == window.location.href) {
          console.log(myUrl);
          console.log(window.location.href);
          li.addClass('active');

        }
      });

    }

  });

</script>

Brief Demo

我的问题与此非常相似question 。我正在关注它的第一个答案。

为了看得更清楚,这是我的 Accordion 的图片。 accordion

附带说明:我正在使用 ruby​​ 2.2.1 和 Rails 4.1

最佳答案

这段代码应该可以解决问题:

$(document).find("a[href*='" + '/' + window.location.pathname + "']").parents(".head").find("h3").trigger("click");

Example of where to place your code

关于javascript - 根据当前页面 URL 打开特定的 Jquery Accordion 面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31971860/

相关文章:

javascript - 纯 Javascript 或基于原型(prototype)的免费时间线库

php - 我需要从 Mysql 中回显更多列

javascript - 如何在 Node.js Express 应用程序中向用户提供下载窗口选项

javascript - 使用 Javascript 获取 HTML 元素样式

javascript - 单击 <a> 标记时不运行 jQuery 函数

jquery - 你能 !important 整个 css 文件吗?

jquery 对话框在使用 autoOpen 时有效,但在使用 .click 时无效

javascript - 可拖动文本框不能在 IE9 中工作?

javascript - 如何从 ajax 数据绘制 highstock 单线系列图

javascript - 如何从 JQuery Slider 中删除 Opcity