Accordeon expand collapse, еще один вариант

Question

Я пытаюсь сделать отзывчивое меню для размера мобильного телефона. То, что я хочу, это collapseable навигации меню, например:

• (не расширяется) кнопку А
• (не расширяется) КНОПКА B
• (расширяемый) КНОПКА C
• КНОПКА C вариант А

Итак, когда вы видите меню первого, вы видите только кнопка A, B и C. при нажатии на кнопки C, ниже он появляется (нажав на него) опцию А.

Что я до сих пор представляет собой кнопку с трехстрочным значком навигации. Когда вы нажимаете на нее, вы видите кнопку 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

РЕШЕНИЕ:

Оберните свой i con в span, чтобы добавить селектор и добавить к нему прослушиватель событий клика. Также я добавил класс, который использует display: none для вашей вложенной ul.

---

JSFiddle

---

КОД SNIPPET:

$(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>