0

我试图<ol>在单击使用 JQuery 的链接时显示和隐藏（切换）。我的 HTML 是

 <ol id="sortable" class="sortable">
    <li>
       <div>
          <span class="drag-image groupimage">&nbsp;</span>
          <a class='expand'>{{ portfolio_group.name }}</a>
       </div>
     <ol style="display: none; margin:0px" id={{ portfolio_group.id }}>
         <li>
            <div class="patent-div">
               <span style="" class="drag-image patentimage">&nbsp;</span>
               <a class="patent-name" href='{{ path('v2_pm_patents_edit', { 'patentId': patent.id }) }}'>{{ patent.patentName }}</a>
            </div>
     </ol>
 </ol>

由于内部 ol 是隐藏的，当我单击带有 class = expand 的链接时，我想让它切换。

到目前为止我尝试了什么

 $(document).ready(function(){
    $('.expand').click(function() {
        $(this).nextAll('ol').eq(0).slideToggle('fast');
    });

});

但它不起作用有什么想法吗？

谢谢

4

3 回答 3

0

看看这个工作jsfiddle。

$(".expand").click(function() {
   $(this)
       .parent()
       .nextAll('ol')
       .eq(0)
       .slideToggle('fast');
});
于 2012-08-02T14:43:05.430 回答
0

该.nextAll()函数查看调用它的 jQuery 对象中元素的兄弟姐妹。但是，<ol>您要切换的 看起来不像是<a>触发点击事件的元素的兄弟，而是<div>包含<a>.

<div>您可以使用该函数将 DOM 向上遍历到父级.parent()，然后调用.nextAll()：

$(this).parent().nextAll('ol').eq(0).slideToggle('fast');
于 2012-08-02T14:43:31.120 回答
0

您的代码的问题是 nextAll 仅在 dom 中搜索当前选择器的兄弟姐妹，但是您的示例显示您希望扩展的 OL 与 div 包含的单击项目分开。

我已经在 J​​Sfiddle 上提出了一个解决方案，如果您的示例的 html 结构在生产中不会发生变化（即您希望扩展的 OL 始终紧跟在包含可点击链接的父“div”之后）应该可以工作。

小提琴的链接在这里 -

http://jsfiddle.net/2LQJe/11/

我使用的代码在这里：

$(document).ready(function(){

    $('.expand').click(function() {
        $(this).parents('div').next('ol').slideToggle('fast');
    });

});

这样做的原因是我们必须首先在 dom 树上找到一个元素，它是您希望扩展的元素的兄弟元素，在本例中为 div，然后遍历该兄弟集，尽管此解决方案是我承认不是很灵活。

编辑我还注意到您的 html 结构有一个小错误，即紧跟在您希望展开的 ol 之后的 li 没有关闭，要纠正这个问题，您应该在“patent-div”节点之后放置一个关闭 () 标记。

于 2012-08-02T14:56:51.133 回答