HTML JS-子菜單不起作用？

Question

我正在努力實現這一目標 。 但到目前為止我還沒有成功。 我的代碼如下。 怎么了

的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/