아코디언 확장 축소, 한 번 더 추가 옵션

Question

휴대 전화 크기에 반응 형 메뉴를 만들려고합니다.

• (확장되지 않음) A 버튼
• (확장되지 않음) 버튼 B
• (확장) 버튼 C
• 버튼 C 옵션 A : 는 내가 원하는 예를 들어, collapseable 네비게이션 메뉴입니다 먼저 메뉴를 볼 때 옵션 A.
  을 (클릭하여)이 나타납니다 아래

그래서, 당신은 단지, 버튼 A가 B와 C 당신이 버튼 C를 클릭하면 볼 수

내가 지금까지 가지고있는 것은 3 줄 탐색 아이콘이있는 버튼입니다. 클릭하면 버튼 a, b, c가 표시됩니다. 그러나 버튼 c를 클릭하면 전체 목록이 축소되고 다시 열면 전체 목록이 표시됩니다. 이 ... 내가 생각했던 것이 아니다

내 코딩 : HTML

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
     $(".text").hide(); 
     $(".accordeon div:first-child").addClass("expand_first"); 
     $(".expand").click(function() { 
       $(".text").slideUp(500); 
       if ($(this).next(".text").is(":visible")) { 
         $(this).next(".text").slideUp(500); 
       } else { 
         $(this).next(".text").slideToggle(500); 
       } 
     }); 
}); 
    $(window).load(function() { 
    $('.flexslider').flexslider(); 
    }); 
$('ul li a').click(function() { 
    $(this).parent().find('ul.sub-menu').toggle(); 
    return false; 
}); 
</script> 

<div id="nav-small"> 
     <div class="accordeon"> 
       <div class="expand"><img src="http://localhost:8080/wordpress/wp-content/uploads/2016/06/navicon.png" alt="Navigation" width="50%" height="auto" /> 
         Navigation 
       </div> 
       <div class="text">  
       <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Library</a></li> 
       <li class="sub-menu"><a href="#">Lifestyle</a>▼ 
        <ul> 
         <li><a href="#">Cleaning & Organizing</a></li> 
         <li><a href="#">Health & Beauty</a></li> 
         <li><a href="#">Travel</a></li> 
        </ul> 
       </li> 
       </ul> 

</div></div></div> 

내 CSS :

#nav-small{ 
    width:100%; 
    height:auto; 
} 
#nav-small img{ 
    width:50%; 
    max-width:30px; 
    max-height:30px; 
} 
#nav-small ul{ 
    list-style:none; 
    padding:0; 
    margin:0; 
    font-family:verdana; 
} 
#nav-small ul li{ 
    text-align:center; 
    text-decoration:none; 
    padding: 2% 0; 
    border-bottom:1px solid black; 
} 
#nav-small ul li a{ 
    text-decoration:none; 
} 
#nav-small ul li.sub-menu{ 
    border-bottom:none; 
    padding-bottom:0; 
} 
.accordeon{ 
    text-align:center; 
    background-color: rgba(104,144,192,1.00) ; 
    width:100%; 
} 
.accordeon .expand { 
    display:inline-block; 
    width:30%; 
    height:auto; 
    margin:auto; 
    font-family: Verdana; 
    background-color: rgba(104,144,192,1.00) ; 
    cursor:pointer; 
    padding:1% 0; 
    border-left:1px solid #ccc; 
    border-right:1px solid #ccc; 
} 
.accordeon .text{ 
     display:none; 
    float:left; 
     width:100%; 
    height:auto; 
    margin:auto; 
     border-top:0px; 
     border-bottom:1px solid #ccc; 
     background-color: rgba(211,196,213,1.00); 
    text-align:left; 
} 

Answer 1

해결책 :

너를 감싸 라. 선택기를 추가하고 클릭 이벤트 리스너를 추가 할 수 있습니다. 또한 중첩 된 ul에 display: none을 사용하는 클래스를 추가했습니다.

---

JSFiddle

---

코드 스 니펫 :

$(document).ready(function() { 
 
    $(".text").hide(); 
 
    $(".accordeon div:first-child").addClass("expand_first"); 
 
    $(".expand").click(function() { 
 
    $(".text").slideUp(500); 
 
    if ($(this).next(".text").is(":visible")) { 
 
     $(this).next(".text").slideUp(500); 
 
    } else { 
 
     $(this).next(".text").slideToggle(500); 
 
    } 
 
    }); 
 
    $("#trigger").on("click", function() { 
 
    $(".sub-menu > ul").slideToggle(500, function() { 
 
     $(this).toggleClass("is-not-visible"); 
 
    }); 
 
    }); 
 

 
}); 
 
$(window).load(function() { 
 
    $('.flexslider').flexslider(); 
 
}); 
 
$('ul li a').click(function() { 
 
    $(this).parent().find('ul.sub-menu').toggle(); 
 
    return false; 
 
});

#nav-small { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#nav-small img { 
 
    width: 50%; 
 
    max-width: 30px; 
 
    max-height: 30px; 
 
} 
 

 
#nav-small ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: verdana; 
 
} 
 

 
#nav-small ul li { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 2% 0; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
#nav-small ul li a { 
 
    text-decoration: none; 
 
} 
 

 
.accordeon { 
 
    text-align: center; 
 
    background-color: rgba(104, 144, 192, 1.00); 
 
    width: 100%; 
 
} 
 

 
.accordeon .expand { 
 
    display: inline-block; 
 
    width: 30%; 
 
    height: auto; 
 
    margin: auto; 
 
    font-family: Verdana; 
 
    background-color: rgba(104, 144, 192, 1.00); 
 
    cursor: pointer; 
 
    padding: 1% 0; 
 
    border-left: 1px solid #ccc; 
 
    border-right: 1px solid #ccc; 
 
} 
 

 
.accordeon .text { 
 
    display: none; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: auto; 
 
    border-top: 0px; 
 
    border-bottom: 1px solid #ccc; 
 
    background-color: rgba(211, 196, 213, 1.00); 
 
    text-align: left; 
 
} 
 

 
.is-not-visible { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav-small"> 
 
    <div class="accordeon"> 
 
    <div class="expand"><img src="http://placehold.it/100x100" alt="Navigation" width="50%" height="auto" /> Navigation 
 
    </div> 
 
    <div class="text"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Library</a></li> 
 
     <li class="sub-menu"><a href="#">Lifestyle</a> <span id="trigger">▼</span> 
 
      <ul class="is-not-visible"> 
 
      <li><a href="#">Cleaning & Organizing</a></li> 
 
      <li><a href="#">Health & Beauty</a></li> 
 
      <li><a href="#">Travel</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    </div> 
 
</div>