jQuery手风琴问题

我想根据幻灯片打开一些DIV使用jQuery UI。我希望链接位于其他地方，并根据其ID来定位特定的DIV。我会如何去做这件事？任何提示指向我在正确的方向？jQuery手风琴问题

东西的排序是这样的：

<script> 
    jQuery().ready(function() { 
     jQuery("#accordion").accordion({ 
      collapsible: true, 
      active: false, 
      navigation: true 
     }); 
    }); 
</script>

和：

<h3><a href="#1">Section 1</a></h3> 
<h3><a href="#2">Section 2</a></h3> 
<h3><a href="#3">Section 3</a></h3> 
<h3><a href="#4">Section 4</a></h3> 

<div id="accordion"> 
    <div id="1"> 
     <p>content</p> 
    </div> 
    <div id="2"> 
     <p>content</p> 
    </div> 
    <div id="3"> 
     <p>content</p> 
    </div> 
    <div id="4"> 
     <p>content</p> 
    </div> 
</div>

来源

2011-05-26 Dave

您可以使用activate方法。

签名：

.accordion("activate" , index)

激活手风琴的内容部分编程。该索引可以是零索引数字以匹配要关闭的标题的位置或匹配元素的选择器。通过false关闭所有（只有在可折叠：true时才可能）。

购买使用$(link).click(function(){})，您可以选择点击的元素的ID和通过ID在这样的激活方法的指数：

.accordion("activate" , "#" + id);

来源

2011-05-26 15:38:56 amernov

清洁解决方案比我的+1 – jcvandan 2011-05-26 15:42:34

你想要的东西，看起来更像这一点。

<div id="accordion"> 
    <h3><a href="#1">Section 1</a></h3>  
    <div id="1"> 
     <p>content</p> 
    </div> 
    <h3><a href="#2">Section 2</a></h3> 
    <div id="2"> 
     <p>content</p> 
    </div> 
    <h3><a href="#3">Section 3</a></h3> 
    <div id="3"> 
     <p>content</p> 
    </div> 
    <h3><a href="#4">Section 4</a></h3> 
    <div id="4"> 
     <p>content</p> 
    </div> 
</div>

来源

2011-05-26 15:31:51

您正试图使手风琴上下滑动时点击页面上的其他位置？如果你是，那么我只是打电话给你想点击手风琴的点击事件。

例如具有以下手风琴标记：

<a href='' id='activateAccordion' /> 

<div id="accordion"> 
    <h3><a href="#section1">Section 1</a></h3>  
    <div id="section1"> 
     <p>content</p> 
    </div> 
    <h3><a href="#section2">Section 2</a></h3> 
    <div id="section2"> 
     <p>content</p> 
    </div> 
</div>

你可以把第1节上下滑动一下，像这样的链接“activateAccordion”时：

$('#activateAccordion').click(function() { 
    $('a ##section1').click(); 
});

来源

2011-05-26 15:41:59 jcvandan

这里是解决方案的jsfiddle 。

稍加修改HTML：（注意class和href属性）：

jQuery().ready(function() { 
    var acc = $("#accordion").accordion({ 
      collapsible: true, 
      active: false, 
      navigation: true 
    }); 

    $('.acc-link').click(function() { 
     acc.accordion("activate", $(this).attr('href')); 
    }); 
});

有一点需要注意：使用activate method

<h3><a class='acc-link' href="#1">Section 1</a></h3> 
<h3><a class='acc-link' href="#2">Section 2</a></h3> 
<h3><a class='acc-link' href="#3">Section 3</a></h3> 
<h3><a class='acc-link' href="#4">Section 4</a></h3> 

<div id="accordion"> 
    <h3 id="1"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
    <h3 id="2"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
    <h3 id="3"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
    <h3 id="4"><a href="#"></a></h3> 
    <div> 
     <p>content</p> 
    </div> 
</div>

JS传递到activate方法href属性参数被解释为一个CSS选择器，该选择器方便（并且巧合）以#选择器开始，所以它“仅适用于”任何有效的ID。

来源

2011-05-26 15:58:10 namuol

jQuery手风琴问题

回答

相关问题