Javascript - 侧边栏开关始终打开
Javascript - Sidebar toggle always open
所以我有这个边栏,我想切换它的行为。
而不是像这样关闭它:
我想在网站启动时保持打开状态:
这是javascript
<script type="text/javascript">
$(function() {
$('.navbar-toggler').on('click', function(event) {
event.preventDefault();
$(this).closest('.navbar-minimal').toggleClass('open');
})
});
</script>
和Html
<nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation" id="sidebar-1">
<div class="navbar-toggler animate">
<span class="menu-icon"></span>
<p id="menutab">Menu</p>
</div>
<ul class="navbar-menu animate">
<li class="dropdown" id="dropdown-nav">
<a href="#" class="animate dropdown-toggle" data-toggle="dropdown">
<span class="desc animate" style="font-family: 'Roboto Condensed', sans-serif;">Top 5 Events</span>
<span class="mini-icon"><img src="Images/ps/Events.png" id="mini-icon"></span>
</a>
<ul class="dropdown-menu" id="events">
<iframe src="Php/events.php" id="iframe" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>
</ul>
</li>
<script type="text/javascript">
$(function () {
$(this).closest('.navbar-minimal').toggleClass('open');
});
</script>
添加 class open to navbar-menu 它显示打开,当你点击关闭菜单时它会切换元素 ul.navbar-menu
$(".navbar-toggler").click(function () {
$(".navbar-menu").slideToggle();
});
<nav class="navbar navbar-fixed-left navbar-minimal animate"
转到 html 标记中的上面一行并添加 class “open” 像这样
<nav class="navbar navbar-fixed-left navbar-minimal animate open"
所以会默认打开
所以我有这个边栏,我想切换它的行为。 而不是像这样关闭它:
我想在网站启动时保持打开状态:
这是javascript
<script type="text/javascript">
$(function() {
$('.navbar-toggler').on('click', function(event) {
event.preventDefault();
$(this).closest('.navbar-minimal').toggleClass('open');
})
});
</script>
和Html
<nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation" id="sidebar-1">
<div class="navbar-toggler animate">
<span class="menu-icon"></span>
<p id="menutab">Menu</p>
</div>
<ul class="navbar-menu animate">
<li class="dropdown" id="dropdown-nav">
<a href="#" class="animate dropdown-toggle" data-toggle="dropdown">
<span class="desc animate" style="font-family: 'Roboto Condensed', sans-serif;">Top 5 Events</span>
<span class="mini-icon"><img src="Images/ps/Events.png" id="mini-icon"></span>
</a>
<ul class="dropdown-menu" id="events">
<iframe src="Php/events.php" id="iframe" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>
</ul>
</li>
<script type="text/javascript">
$(function () {
$(this).closest('.navbar-minimal').toggleClass('open');
});
</script>
添加 class open to navbar-menu 它显示打开,当你点击关闭菜单时它会切换元素 ul.navbar-menu
$(".navbar-toggler").click(function () {
$(".navbar-menu").slideToggle();
});
<nav class="navbar navbar-fixed-left navbar-minimal animate"
转到 html 标记中的上面一行并添加 class “open” 像这样
<nav class="navbar navbar-fixed-left navbar-minimal animate open"
所以会默认打开