jQuery遍歷多個相同的class，點選顯示隱藏圖示，顯示及隱藏其下的內容

阿新 • • 發佈：2018-11-03


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery便利多個相同的class，點選顯示隱藏圖示，顯示及隱藏其下的內容</title 
>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<style> 

    body{
        background-color: #FFFFFF;
        letter-spacing: 2px;
    }
    .box{
        padding-top: 100px;
        width: 50%;
        margin: 0 auto;
    }

    ul li ul{
        margin: 20px 0 20px 40px;
    }
    .img_sh{
        margin: 20px 0;
    }

    .img_sh img{
        float: left;
        padding-right 
: 10px;
    }

</style>
<script>
    //頁面載入完畢後加載
    window.onload = function () {
        //遍歷class類名叫img_sh的li
        $(".img_sh").each(function () {
            //將遍歷到的類賦給li
            var li = $(this);
            //執行操作，li的子元素p標籤裡的子元素類名為jia的加號圖片點選後執行函式
            li.children("p").children(".jia").click(function () {
                //點選的自身加號圖片要隱藏
                li.children("p").children(".jia").hide(500);
                //點選完的加號圖片要隱藏，而相反類名為jian的減號圖片要顯示，toggle的作用是取反（既顯示或隱藏）
                li.children("p").children(".jian").toggle(500);
                //下面的ul列也是取反
                li.children("ul").toggle(500);
            })
            //同理
            li.children("p").children(".jian").click(function () {
                li.children("p").children(".jian").hide(500);
                li.children("p").children(".jia").toggle(500);
                li.children("ul").toggle(500);
            })

        })
    }
</script>


<div class="container-fluid">
    <div class="box ">
        <ul class="list-unstyled">
            <li class="img_sh">
                <p>  
                    jq測試
                    <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: none">
                    <img src="images/img02.jpg" alt="" class="img-responsive jian"  style="display: block" >
                </p>
                <ul class="list-unstyled"  style="display: block">
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                </ul >
            </li>
            <li class="img_sh">
                <p>
                    jq測試
                    <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                    <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                </p>
                <ul class="list-unstyled"  style="display: none">
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                </ul >
            </li>
            <li class="img_sh">
                <p>
                    jq測試
                    <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                    <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                </p>
                <ul class="list-unstyled"  style="display: none">
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                </ul >
            </li>
            <li class="img_sh">
                <p>
                    jq測試
                    <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                    <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                </p>
                <ul class="list-unstyled"  style="display: none">
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                </ul >
            </li>
            <li class="img_sh">
                <p>
                    jq測試
                    <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                    <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                </p>
                <ul class="list-unstyled"  style="display: none">
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                </ul >
            </li>
        </ul>
    </div>

</div>
</body>
</html>

方法二:


        $(".iconfontBtn").each(function () {
            var iconfontBtn = $(this);
                iconfontBtn.click(function(){
                    // alert('qwe');
                    var isHidden = $('.iconfontHidden').css('display')
                    if (isHidden == 'block') {
                        // $('#iconfontHidden').css('display','none');
                        // $(".iconfontBtn").next('div').hide(500);
                        // iconfontBtn.next('div').hide(500);
                        iconfontBtn.next('div').slideToggle(500);
                        // $(".iconfontHidden").closest('div').hide(500);
                    }else if(isHidden == 'none'){
                        // iconfontBtn.next('div').toggle(500);
                        iconfontBtn.next('div').slideToggle(500);
                        // $(".iconfontBtn").next('div').toggle(500);
                        // $(".iconfontHidden").closest('div').toggle(500);
                        // $('#iconfontHidden').css('display','block');
                    }
                })
        })

jQuery遍歷多個相同的class，點選顯示隱藏圖示，顯示及隱藏其下的內容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=

微信小程式中多個相同的元件點選時當前樣式的改變

第一次用CSDN寫部落格，以前的是新浪部落格，地址為：http://blog.sina.com.cn/99yt99 以後一直就用CSDN，新浪上面就不更新了。1、需要的東西一張透明背景的圖片：proper.png 2、效果展示預設選中與樣式改變的為“距離優先”

android待機新增電量小部件，點選位置資訊圖示，模式切換需要改為四種

android版本為5.1 小部件功能的實現是在各自的應用程式裡面，小部件新增的過程是在Launcher裡面很明顯，電量小部件的實現是在Settings裡面要寫一個widgets，必須用到AppWidgetProvider這個類 AppWidgetProvider它是

shell遍歷多個文件夾並進行批量修改文件名

多個 hang img style 問題 abc 修改文件 jpg 圖片問題：將圖片名中的ing_變為0。當前目錄下：$ ls pic，change_name.sh pic/ |__kk1/ |__img_001.jpg

Python中同時遍歷多個列表

兩個列表大小一樣，想要同時遍歷，可以採用zip方法打包。比如：將一個句子分詞和詞性標註，需要遍歷得到每個詞的詞性。 words = ['元芳', '你', '怎麼', '看'] postags = [

xlwings遍歷多個excel工作簿獲取指定的單元格資料

# -*- coding: utf-8 -*-import globimport xlwings as xwx=glob.glob(r'D:\Python實踐\測試報告\*.xls*')if len(x) : print(x) for y in x:

使用zip同時遍歷多個迭代物件

zip(iterable1, iterable2,…) 功能描述 zip() 函式用於將可迭代的物件作為引數，將物件中對應的元素打包成一個個元組，然後返回由這些元組組成的物件，這樣做的好處是節約了不少的記憶體。我們可以使用 list() 轉換來輸出列表。 zip()引數可以接受任何

C foreach 需要遍歷多個list的問題

<c:forEach items="${listGroupUser}" var="list" varStatus="st"> <tr class="text-c"> <td><

JS 獲取多個相同class的html內容

<div> <p class="molecule">30</p> <p class="Denominator">7.5%&

同步遍歷多個列表

結果 log 姓名利用人物 ase 不能 color 之間 Python的for循環十分靈活，使用for循環我們可以很輕松地遍歷一個列表，例如： a_list = [‘z‘, ‘c‘, 1, 5, ‘m‘] for each in a_list: print(

使用ButterKnife方法，點選事件響應裡面，執行performClick失效，不能再同一幀響應多個點選事件

最近在專案中使用butterKnife繫結點選事件，在一個控制元件點選中，執行另外一個控制元件的點選事件，然後發現失效。檢視butterknife生成的原始碼，發現butterknife的OnClickListener外層被包裹了一層，目的在於防止同一幀被多次點選。 pu

懸浮球（多機型懸浮窗許可權設定，狀態列適配，可自動或手動設定大小，點選跳轉WebView，拖拽處理）

懸浮球：多機型懸浮窗許可權設定，狀態列適配，可自動或手動設定大小，點選跳轉WebView，拖拽處理，應用內和應用外都可以顯示（可設定取消）可做SDK 和依賴類，橫豎屏切換處理專案地址： GitHub：https://github.com/gitUserBoy/flow_balls.

jquery特效---jquery顯示縮圖，點選檢視大圖，並且大圖可自適應原圖大小

之前為了實現這樣的效果找了很久，大部分都不是自己想要的。實現這樣的效果，我用了兩個jquery的框架。一個是 jquery.nailthumb.1.1.js，另一個是jquery.colorbox-min.js。

Android--listview中每個item有多個控制元件的點選方法

有時候listview中item是由多個控制元件組成的，如果要分別獲取每個元件的點選事件，需要在adapter中getview方法中位每個控制元件設定tag，tag值為position，然後在onclick方法中判斷t

使用網頁巢狀iframe標籤，點選左側導航欄，在右側動態顯示頁面的資訊

<div class="main">  <div class="main_left"> <div class="li_title">使用者管理<span

前端之路：bootstrap table 按鈕，元素，點選事件沒反應，無效的解決方方案。

問題：bootstrap table 生成的表格裡formatter新增的 HTML元素按鈕，js 中新增點選事件，點選沒反應。或者點選好多次，重新整理在點選，才有反應。最近專

JavaScript滑鼠事件，點選滑鼠右鍵，彈出div

document.oncontextmenu = function(){return false}; //禁止滑鼠右鍵選單顯示 var res = document.getElementById('box'); //找到id為b

kubernetes（7）：在windows上面，使用原生docker 支援kubernetes服務，點選下就安裝，kubernetes-desktop

kubernetes 1，關於docker的kubenetes支援 2，安裝安裝非常的簡單：勾選，啟用 kubernetes 就行，然後就開始安裝了。需要保持網路暢通，能下載docker映象。和k8s.

Echarts統計圖，點選統計圖時，判斷點選的區域是不是統計圖區域

下面的程式碼，是獲取點選統計圖區域的，也就是 X 軸和 Y 軸中的這個框框區域，如下圖的紅色框框中。 myCharts.getZr().on('click', function (params) { const pointInPixel = [params.

swiper一組圖片，點選圖片出現中間，看效果

好兄弟先看看效果是這樣的麼點選哪個頭像，頭像移動到中間，然後放大，demo上寫了五條資料廢話不多說直接上程式碼 1.引入swiper.css, swiper.js 2.HTML(小弟做的是移動端的，所以meta-viewport要引入哦) <div class="i

jQuery遍歷多個相同的class，點選顯示隱藏圖示，顯示及隱藏其下的內容

相關推薦