【jquery】結合class選擇器、next、prev方法實現相鄰的節點展開隱藏效果

在頁面效果中，有時候我們程式循環出來的欄位不能加上ID屬性，因為可能有清單可能會循環出多個相同的ID，這樣就不能使用Jquery 的ID選擇器，這時候我們可以使用Class選擇器,

同時我們也可能需求是對此節點元素的操作只限於目前的p（或table中），我們看程式碼：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<#html xmlns="http:// / www.w3.org/1999/xhtml">
#<##頭##>    <
元 http-equiv="內容類型" 內容="文字/html;  字元集=utf-8" ##/>##    <標題
##> jquery效果標題>    <腳本 
# src#="http ://common.cnblogs.com/script/jquery.js" 型別="text/javascript" ##>腳本>    <腳本  type
="text/javascript">        //展開隱藏層
       ##document).ready(function
 () {            $(".part"
).click(function () {                1##       = $(
this).next();                if (hideP.css('##顯示') ==# '#'##) {           。          
else
 {                     hideP.hide();                         在}            }));
      
#".all"

).click(function () {
             
##var
 hideP =# $(this#).prev(); if
 (hideP.css('display')  # #==
 '#無') {               # $(this).hide();                }##else {
     hideP.hide();
    $(this).show();
}
          });
         }); ;/
head><
body> ​ <
p class='classA'>
          <p class="part">
Content 1p##>         < p class="all" style
="display:none"> ; Content 1, hahaha, I expanded it, here is more content hahap> ​ p> ​ <p
class= 'classA'>
         <p class="part">Content 2
p>                                                        #class="all" style="display:none">Content 2, hahaha , I expanded it, here is more content
p>​ p> <p class='classA'
><p class="part">Content 3p>
         <p class="all" style="display:none">Content 3, hahaha, I expanded it, here is more contentp>
p>
body>
html>

That is to say, I want to expand the hidden content at classA without affecting other content at the same classA. In fact, the focus here is the use of the jquery next and prev methods. Of course, they can also be used in other situations.

以上是【jquery】結合class選擇器、next、prev方法實現相鄰的節點展開隱藏效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！