Question

我正在尝试创建一个按钮，切换它下面的每个<p>。

这是HTML：

<p>SHOW</p>
<p>SHOW</p>
<p>SHOW</p>

<a id="hc-more-info">MORE INFO</a>

<p>HIDE</p>
<p>HIDE</p>
<p>HIDE</p>
<ul> ... <ul>

jQuery（这是我到目前为止所做的）我如何从他们开始hiden？

jQuery('#hc-more-info').click(function(){
        jQuery(this).parent().nextAll('p, ul').toggle();
    });

任何帮助都将非常感谢！谢谢！

Answer 1

可以使用nextAll()，其中包含所有跟随当前元素的兄弟姐妹

jQuery(function($){
    $('#toggle-below-button').click(function(){        
       var $btn = $(this), showMore = !$btn.hasClass('show-all');
       $btn.toggleClass('show-all')
            .text( showMore  ? 'LESS INFO' :'MORE INFO')
            .nextAll()
            .toggle();       
    });
});

Answer 2

您可以使用$（＆＃39; p＆＃39;）作为选择器

修改

请原谅我在评论之前不理解。您也可以使用.next方法，但在我看来，更好的做法是将一些类分配给下面的元素，然后切换为$（＆＃39; p.toggle＆＃39;）来控制它。

Answer 3

jQuery('#hc-more-info').click(function(){   
     jQuery(this).parent().nextAll('p').toggle();
});

Jquery如何选择id / class下面的元素而不是父类？

3 个答案: