单击子菜单项时如何停止切换事件？

Question

我有一个侧边栏菜单。每个菜单项都有子菜单。它是动态创建的。这是代码：     

 <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <?php
            $mysqli=mysqli_connect('localhost','root','','Dmenu2');
            $sql="SELECT * FROM menu" ;
            $result=mysqli_query($mysqli,$sql) or die(mysqli_error());

            while($row=mysqli_fetch_array($result)){
            if( $row['parent_id']==0){
            $cat_id=$row['id'];
            $cat_name=$row['name'];
            echo "<li><a>".$cat_name."</a>";
            echo "<ul class='sub-menu'>";
            $sql2="SELECT * FROM menu WHERE parent_id=$cat_id";
            $result2=mysqli_query($mysqli,$sql2) or die(mysqli_error());

            while($row=mysqli_fetch_array($result2)){
            $sub_cat_id=$row['id'];
            $sub_cat_name=$row['name'];
            $sub_cat_target=$row['target'];
            echo "<li><a href='".$sub_cat_target."'>".$sub_cat_name."</a></li>";           
             }
            echo "</ul>";
            echo "</li>";
            }

      }
  ?>
      </ul>
  </div>

我的jQuery是这样的:(用于切换）：

$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});

当我点击子菜单项时，我不希望整个子菜单切换，而是希望突出显示该特定子菜单。每个子菜单项链接到一个单独的页面，该页面加载在页面内容包装器div中。

  $(function () {
        $('.sub-menu a').on('click', function (e) {
            e.preventDefault();
            var page = $(this).attr('href');
            $('#page-content-wrapper').load(page);

        });

    });

单击子菜单项时如何停止切换？我试图使用stop（）函数取消绑定子菜单的单击，但它都不起作用。