Accordeon展開摺疊，多一個選項

Question

我正在嘗試爲手機尺寸製作響應菜單。 我要的是一個collapseable導航菜單，例如：

• （未擴）按鈕
• （未擴）按鈕B
• （可擴展）按鈕C
• 按鈕C選擇A

所以，當你第一眼看到的菜單，你只看到按鈕A，B和C 當你點擊按鈕C，會出現如下（通過點擊它）選項A.

我到目前爲止是一個帶有三行導航圖標的按鈕。 當你點擊它時，你會看到按鈕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

SOLUTION：

包裹你我在一個範圍內添加一個選擇器並添加一個點擊事件監聽器。 此外，我添加了一個類，使用display: none爲您的嵌套ul。

---

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>