Question

我正在尝试使用JQuery单击链接时显示和隐藏（切换）<ol>。我的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');
    });

}）;

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

由于

Answer 1

查看此工作jsfiddle。

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

Answer 2

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

您可以使用.parent()函数将DOM遍历到父.nextAll()，然后调用$(this).parent().nextAll('ol').eq(0).slideToggle('fast');：

{{1}}

Answer 3

你的代码的问题是nextAll只搜索当前选择器的兄弟姐妹的dom，但是你的例子显示你想要扩展的OL与div包含的被点击的项目分开。

我已经在JSfiddle上做了一个解决方案，提供你的例子的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没有关闭，为了纠正这个问题你应该放一个closing（）标签在“patent-div”节点之后。

JQuery切换有序列表

3 个答案: