HTML JS - 子菜單不工作？

Question

我正試圖實現this。但迄今爲止我還沒有成功。我的代碼如下。它有什麼問題？

HTML：

<nav id="bt-menu" class="bt-menu"> 
       <a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu 
       <ul > 
         <li style="text-align:center;"><a href="index.php"><span>DashBoard</span></a></li> 
         <li style="text-align:center;"><a href="user.php"><span>User </span></a></li> 
         <li style="text-align:center;"><a href="candidates.php"><span>Candidates</span></a></li> 
         <li style="text-align:center;"><a href="party.php"><span>Partylist</span></a></li> 
         <li style="text-align:center;"><a href="position.php"><span>Position</span></a></li> 
         <li style="text-align:center;"><a href="program.php"><span>Program</span></a></li> 
         <li style="text-align:center;"><a href="department.php"><span>Department</span></a></li> 
         <li style="text-align:center;"class="active"><a href="syear.php"><span>School-Year</span></a></li> 
         <li style="text-align:center;"><a href="reports.php"><span>Reports</span></a></li> 
         <li style="text-align:center;"><a href="#"><span>Logs</span></a> 
     <ul class="sub-menu" style="text-align:right"> 
     <li><a href="#" style="text-align:right;">Submenu</a></li> 
      </ul></li> 
       </ul> 
      </nav> 

的Javascript：

<script type="text/javascript"> 
$('li a').click(
function() { 
    $(this).next().slideToggle(); 
}) 
    </script> 

Answer 1

首先糾正你的標籤，有些標籤是不正確關閉。

其次，您需要使用preventDefault()來禁用a標記的默認操作。

三，

$('li a').click(
function() { 
    $(this).next().slideToggle(); 
}) 

該代碼將切換菜單，你只有一個元素是菜單本身。

所以用這個

$('li a').click(function(e) { 
    e.preventDefault(); 
    $('a:contains(Submenu)').slideToggle(); 
}); 

https://jsfiddle.net/uc3hp4o5/