我有一个左侧边栏，
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kendozone </title>
<!-- Global stylesheets -->
<link media="all" type="text/css" rel="stylesheet" href="https://my.kendozone.com/css/icons/icomoon/styles.css">
<link media="all" type="text/css" rel="stylesheet" href="https://my.kendozone.com/css/app.css">
</head>
<body class="sidebar-xs has-detached-right navbar-top">
<div class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="https://my.kendozone.com"><img src="/images/logored.png" alt=""></a> <ul class="nav navbar-nav visible-xs-block mt-15"> <li class="dropdown language-switch-mobile"> <a data-toggle="collapse" data-target="#navbar-second-toggle"> <a class="dropdown-toggle pl-20 pr-20 " data-toggle="dropdown" aria-expanded="false"> <img src="/images/flags/MX.png" class="position-left" alt=""> </a> <ul class="dropdown-menu"> <li><a class="mexico" href="https://my.kendozone.com/lang/es"> <img src="/images/flags/MX.png" alt="Español"> Español</a></li> <li><a class="english" href="https://my.kendozone.com/lang/en"> <img src="/images/flags/GB.png" alt="English"> English</a></li> </ul> </a> </li> <li><a data-toggle="collapse" data-target="#navbar-second-toggle"> <img src="https://lh3.googleusercontent.com/-1IZ2nbY2o40/AAAAAAAAAAI/AAAAAAAAHEY/KrhjLc7m66g/photo.jpg?sz=50" alt="kendozone_avatar"> </a> </li> <li> <a class="sidebar-mobile-main-toggle"><i class="icon-paragraph-justify3 mobile-menu"></i></a> </li> </ul> </div> <div class="navbar-collapse collapse" id="navbar-second-toggle"> <ul class="nav navbar-nav breadcrumbs"> <ol class="breadcrumb"> <li class="active">Panel de control</li> </ol> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown language-switch-desktop"> <a class="dropdown-toggle pl-20 pr-20 " data-toggle="dropdown" aria-expanded="false"> <img src="/images/flags/MX.png" class="position-left" alt=""> </a> <ul class="dropdown-menu"> <li><a class="mexico" href="https://my.kendozone.com/lang/es"> <img src="/images/flags/MX.png" alt="Español"> Español</a></li> <li><a class="english" href="https://my.kendozone.com/lang/en"> <img src="/images/flags/GB.png" alt="English"> English</a></li> </ul> </li> <li class="dropdown dropdown-user"> <a class="dropdown-toggle" data-toggle="dropdown" id="dropdown-user"> <img src="https://lh3.googleusercontent.com/-1IZ2nbY2o40/AAAAAAAAAAI/AAAAAAAAHEY/KrhjLc7m66g/photo.jpg?sz=50" alt="kendozone_avatar"> <span>Julio</span> </a> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="https://my.kendozone.com/users/flordcactusatgmail-com/edit "><i class="icon-user"></i> Perfil</a></li> <li > <a class="protip" data-pt-title="Torneos eliminados" href="https://my.kendozone.com/tournaments/deleted"><i class="icon-trash-alt position-left sidemenu"></i><span>Torneos eliminados</span> </a> </li> <li><a href="https://my.kendozone.com/logs"> <i class="icon-file-text"></i> Logs </a> </li> <li><a href="https://my.kendozone.com/auth/oauth"> <i class="icon-lock5"></i>Tokens </a> </li> <li class="divider"></li> <li><a href="https://my.kendozone.com/logout" id="logout"><i class="icon-switch2"></i> Desconectar </a> </li> </ul> </li> </ul> </div> </div><!-- Page container -->
<div class="page-container">
<!-- Page content -->
<div class="page-content">
<div class="sidebar sidebar-main sidebar-fixed"> <div class="sidebar-content"> <div class="anchor-top"> <ul class="navigation navigation-main"> <li class=active> <a href="https://my.kendozone.com" class="protip" data-pt-title="Dashboard"> <i class="icon-display4 position-left sidemenu" title data-original-title="Main"></i> <span>Dashboard</span> </a> </li> <li > <a class="protip" data-pt-title="Federaciones" href="https://my.kendozone.com/federations"> <i class="icon-address-book position-left sidemenu"></i><span>Federaciones</span> </a> <li > <a class="protip" data-pt-title="Torneos creados" href="https://my.kendozone.com/tournaments"><i class="icon-trophy2 position-left sidemenu"></i><span>Torneos creados</span> </a> </li> <li > <a class="protip" data-pt-title="Participaciones" href="https://my.kendozone.com/users/flordcactusatgmail-com/tournaments"> <i class="icon-medal2 position-left sidemenu"></i><span>Participaciones</span> </a> </li> <li > <a class="protip" data-pt-title="Invitations" href="https://my.kendozone.com/invites"><i class="icon-envelop3 position-left sidemenu"></i><span>Invitations</span> </a> </li> </ul> </div> <div class="anchor-bottom"> <ul class="navigation navigation-main"> <li class="navigation-bottom"> <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <img src="/images/flags/MX.png" class="side_flag" alt=""> </a> </li> <li class="side_avatar"> <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <img src="https://lh3.googleusercontent.com/-1IZ2nbY2o40/AAAAAAAAAAI/AAAAAAAAHEY/KrhjLc7m66g/photo.jpg?sz=50" alt="kendozone_avatar" class="side_avatar"> </a> <ul class="onclick-menu-content"> </ul> </li> </ul> </div> </div> </div>
<!-- Main content -->
<div class="content-wrapper">
<!-- Content area -->
<div class="content"></div>
<!-- /content area -->
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</div>
<!-- /page container -->
<script src="https://my.kendozone.com/js/bootstrap.js"></script>
<script>
</script>
<script src="https://my.kendozone.com/js/app.js"></script>
<script>
$(document).ready(function () {
$.protip();
});
</script>
</body>
</html>
我想在最后一个图标上有一个子菜单，但子菜单想要在侧边栏的底部打开...
有没有办法在点击时打开子菜单，然后向右打开它？
我想打开一个子菜单“protip like”。
基本上，我想转移配置文件（Julio）和实际位于侧边栏底部顶栏的标志。