Question

我有手风琴（档案）链接/日期。当用户点击一个时，我试图让手风琴扩展到当前选定的链接。为此，我在手风琴中搜索与当前URL匹配的链接，然后将手风琴扩展为该链接。

HTML

<div class="desktop">
    <div id="blog-archive-accordion">
        <h3 id="archive" class="title">Archive</h3>
        <div id="blog-archive-accordion-year">      
            <h4>2016</h4>       
            <ul>
                <li class="month">November (0)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=8">August</a> (8)</li>
                ....
            </ul>
            <h4>2015</h4>       
            <ul>
                <li class="month">November (0)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li>
                <li class="month"><a class="current-archive-link" href="/website/archive?filter[year]=2016&amp;filter[month]=8">August</a> (8)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=7">July</a> (9)</li>
                ....
            </ul>
            <h4>2014</h4>       
            <ul>
                <li class="month">November (0)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li>  
                ....              
            </ul>
        </div>
    </div>
</div>

的Javascript

// Accordionize the above structure.
$(function() {
    $("#blog-archive-accordion").accordion({ header: "h3" });
    $("#blog-archive-accordion-year").accordion({ header: "h4"  });
});

// Find the current url in the accordion links (obv. doesn't work like this in JSFiddle)
//var selectedArchiveLink = $('#blog-archive-accordion').find("a[href='" + location.pathname + location.search +"']").parent();
var selectedArchiveLink = $('#blog-archive-accordion').find(".current-archive-link").parent();
if(selectedArchiveLink.length > 0){
    selectedArchiveLink.addClass("current-archive-link"); // Style the current link

    // How do I know where the found link was?
    $('#blog-archive-accordion-year').accordion('option', 'active', 1);
}

在上面的示例中，我强制使用.accordion('option', 'active', 1);进行手风琴操作，但我想知道如何找到找到的链接的索引。考虑到手风琴中的指数是基于标题标签，而不是手风琴中的实际指数。

IE：

<h4></h4>
<ul></ul>
<div></div>
<h4></h4>
<div></div>

会对两个<h4>标记进行手风琴，而第二个标记的索引为3而不是1，就像您需要此.accordion()函数一样。

Answer 1

您可以使用index函数获取父元素中当前元素的索引/位置（您也可以根据标记名使用它）

selectedArchiveLink.parent().index('ul')

检查示例：
http://jsfiddle.net/tg4hc9zr/

Answer 2

你可能正在寻找这个。只需将此函数添加到您的accordion函数调用中，它将为您提供h4标记的索引。希望这会有所帮助。

  activate: function(evt, widget ) {
        var index = $(this).find("h4").index(widget.newHeader[0]);            
    }


$("#blog-archive-accordion-year").accordion({ 
       header: "h4",
       activate: function(evt, widget ) {
            var index = $(this).find("h4").index(widget.newHeader[0]);            
        }    
    });

如何在jQuery UI Accordion中找到包含特定元素的折叠选项卡的索引？

2 个答案: