首頁 > web前端 > js教程 > 主體

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

巴扎黑
發布: 2017-06-22 10:00:36
原創
1239 人瀏覽過

在頁面效果中,有時候我們程式循環出來的欄位不能加上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 haha
p> ​ 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板