jquery查找子元素和兄弟元素

本文轉載自查看原文 2019-02-21 11:07 6999 前端技術學習/ jqury

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {padding: 0;margin: 0;}
    ul { list-style-type: none;}
    
    .parentWrap {
      width: 200px;
      text-align:center;
      
    }
    
    .menuGroup {
      border:1px solid #999;
      background-color:#e0ecff;
    }
    
    .groupTitle {
      display:block;
      height:20px;
      line-height:20px;
      font-size: 16px;
      border-bottom:1px solid #ccc;
      cursor:pointer;
    }
    
    .menuGroup > div {
      height: 200px;
      background-color:#fff;
      display:none;
    }
  
  </style>
  
  <script src="jquery-1.12.4.js"></script>
  <script>
     $(function () {
       $(".groupTitle").click(function () {
         $(this).next("div").slideDown(200).parent().siblings().children("div").slideUp(200);
       })
     })
  </script>
</head>
<body>
<ul class="parentWrap">
  <li class="menuGroup">
    <span class="groupTitle">標題1</span>
    <div>我是彈出來的div1</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">標題2</span>
    <div>我是彈出來的div2</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">標題3</span>
    <div>我是彈出來的div3</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">標題4</span>
    <div>我是彈出來的div4</div>
  </li>
</ul>
</body>
</html>

元素查找：$(this).next("div")查找當前下面的div元素

獲取父元素：$(this).next("div").parent()

獲取父元素的其他元素：$(this).next("div").parent().sibings()

獲取父元素下面的子元素：$(this).next("div").slideDown(200).parent().siblings().children("div")

動畫效果：slideDown sildeup

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQuery的父、子、兄弟節點查找方法 Jquery 獲取元素（父節點、子節點、兄弟節點）方法 jquery 獲取元素(父節點,子節點,兄弟節點) jQuery選擇器-->當前元素的父元素的兄弟元素的子元素 js和jquery獲取父級元素、子級元素、兄弟元素的方法 jquery 獲取元素(父節點,子節點,兄弟節點),元素篩選 jquery-插入兄弟元素 Vue 獲取兄弟元素，子元素，父元素 jQuery 查找元素1 jQuery——子元素篩選器