我該如何隱藏或顯示內部水平

Question

我想要點擊一個裏面的時候，如果不可見，變爲可見（只有第一層），如果它們是可見的，則隱藏在內部012裏面，例如 例如 如果您單擊如果＃3被隱藏，則在＃2上顯示，如果顯示＃3，則隱藏 如何隱藏或顯示內層？

$(".accordion li").click(function(e){ 
 
    if($(this).find("> ul").is(":visible")) 
 
\t \t $(this).find("> ul").hide(); \t 
 
\t else 
 
\t \t $(this).find("> ul").show(); 
 
}); 
 
$(".accordion li:has(> ul)").each(function(index, element) { 
 
    $(this).find("> a").removeAttr("href"); 
 
});

.accordion{font-family:'byekan';display:block}.accordion>ul>li{cursor:pointer;background-color:#2980b9;font-size:1.5rem;color:#fff}.accordion>ul>li:hover{background-color:#3498db}.accordion>ul>li:not(:last-of-type){border-bottom:1px solid #fff}.accordion>ul>li>a{display:inline-block;padding:15px}.accordion>ul>li>ul>li{cursor:pointer;background-color:#2c3e50;font-size:1.1rem;color:#fff}.accordion>ul>li>ul>li:hover{background-color:#34495e}.accordion>ul>li>ul>li>a{display:inline-block;padding:10px}.accordion>ul>li>ul>li>ul>li{cursor:pointer;background-color:#27ae60;font-size:.9rem;color:#ddd}.accordion>ul>li>ul>li>ul>li:hover{background-color:#2ecc71}.accordion>ul>li>ul>li>ul>li>a{display:inline-block;padding:6px}.accordion>ul>li>ul>li>ul>li>ul>li{cursor:pointer;background-color:#16a085;font-size:.9rem;color:#fff}.accordion>ul>li>ul>li>ul>li>ul>li:hover{background-color:#1abc9c}.accordion>ul>li>ul>li>ul>li>ul>li>a{display:inline-block;padding:4px}.accordion ul{display:inline}.accordion ul li{list-style:none}.accordion ul li a{color:#fff}.accordion ul li a:hover{color:#eee}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<aside class="accordion"> 
 
    <ul> 
 
     <li><a>#1</a> 
 

 
      <ul> 
 
       <li><a>#2</a> 
 

 
        <ul> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li><a>#2</a> 
 

 
        <ul> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a>#1</a> 
 

 
      <ul> 
 
       <li><a>#2</a> 
 

 
        <ul> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
         <li><a href="">#3</a> 
 

 
          <ul> 
 
           <li><a href="">#4</a> 
 
           </li> 
 
           <li><a href="">#4</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</aside>

Answer 1

既然你編輯的，現在我明白你的意思，所以我編輯我的答案。

是如此簡單：

$('li').on('click',function(e){ 
 
    
 
    e.stopPropagation(); 
 
    $(this).find('ul').toggle(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<aside class="accordion"> 
 
    <ul> 
 
     <li><a>#1</a> 
 

 
      <ul> 
 
       <li><a>#2</a> 
 

 
        <ul> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li><a>#2</a> 
 

 
        <ul> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a>#1</a> 
 

 
      <ul> 
 
       <li><a>#2</a> 
 

 
        <ul> 
 
         <li><a href="">#3</a> 
 
         </li> 
 
         <li><a href="">#3</a> 
 

 
          <ul> 
 
           <li><a href="">#4</a> 
 
           </li> 
 
           <li><a href="">#4</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</aside>

您需要使用事件stopPropagation因爲如果你不這樣做，從容器裏的事件將觸發點擊事件。

Answer 2

您需要更改JavaScript代碼，如下所示。 DEMO

JS：

$(".accordion li:has(> ul)").each(function (index, element) { 
    $(this).find("> a").removeAttr("href"); 
}); 

$(".accordion li a").click(function(){ 
    $(this).parent().find('ul').slideToggle(300); 
});