Materialise 固定侧边栏关闭
Materialize fixed-sidebar close
我有一个始终可见的 Materialise 固定侧导航。我想添加打开和关闭它的按钮。
如果我在按钮上添加$('.sidenav').sidenav('close')
,它只能关闭侧边栏;与 $('.sidenav').sidenav('open')
.
类似
我不想制作两个按钮。我该如何解决这个问题?
这是初始化侧边栏的函数:
$(document).ready(function () {
$('.sidenav').sidenav();
});
这是我的 HTML:
<ul id="slide-out" class="sidenav sidenav-fixed">
<li>
<div class="user-view">
<div class="background">
<img src="img/flag.png">
</div>
<a href="#user"><img class="circle" src="img/yuna.jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div>
</li>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
<li><a href="#!"><i class="material-icons">account_balance</i>Departments</a></li>
<li><a href="#!"><i class="material-icons">store</i>Regions</a></li>
<li><a href="#!"><i class="material-icons">description</i>Districts</a></li>
<li><a href="#!"><i class="material-icons">panorama</i>Cities</a></li>
<li><a href="#!"><i class="material-icons">time_to_leave</i>Vehicles</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
<li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
</ul>
我有一个带 class .sidenav-close
的按钮不起作用(这是默认设置)。我认为这是因为我的侧边栏是固定的。
是否有默认的打开和关闭方法?
这是我的按钮,需要 open/close 它:
<a href="#!" data-target="slide-out" class="sidenav-trigger rb_nav_btn">
<i class="material-icons">menu</i>
</a>
我考虑编写一个函数来检查边栏是否打开然后在 click
时关闭它,反之亦然。
固定导航栏并不意味着关闭...它的唯一意义是提供一种快速实现始终可见的导航栏的方法。所以你要问的基本上是在初始化后立即打开一个简单的导航栏......简单导航栏和固定导航栏之间的唯一区别是后者开始打开。
顺便说一句,如您所想,您可以使用 Docs 中所说的 属性 instance.isOpen
到 检查 如果 sidenav 打开.如果是关闭它,否则打开它。我使用了浮动按钮并评论了sidenav的默认触发器,因为它的功能被浮动按钮取代了。
注意:为了看到它的实际效果,您需要 运行 代码片段并单击 FULL PAGE link,否则您将看不到导航栏,您必须手动打开它。这是因为如果 window 的宽度小于 992:
,那么查看代码似乎 Sidenav 会自行关闭
来源:materialize.js (第 5834 行)
value: function _handleWindowResize() {
// Only handle horizontal resizes
if (this.lastWindowWidth !== window.innerWidth) {
if (window.innerWidth > 992) {
this.open();
} else {
this.close();
}
}
this.lastWindowWidth = window.innerWidth;
this.lastWindowHeight = window.innerHeight;
}
这是您的脚本:
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".sidenav");
var options = {};
var instances = M.Sidenav.init(elems, options);
document
.querySelector("#toggle_sidenav")
.addEventListener("click", function() {
var elem = document.querySelector(".sidenav");
var instance = M.Sidenav.getInstance(elem);
if (instance.isOpen) {
console.log("Is open: I need to close it");
instance.close();
} else {
console.log("Is closed: I need to open it");
instance.open();
}
});
});
header, main, footer {
padding-left: 300px;
}
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 0;
}
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul id="slide-out" class="sidenav sidenav-fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<!-- <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a> -->
<div style='position: absolute; bottom:10px; right:10px'>
<a id="toggle_sidenav" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
我有一个始终可见的 Materialise 固定侧导航。我想添加打开和关闭它的按钮。
如果我在按钮上添加$('.sidenav').sidenav('close')
,它只能关闭侧边栏;与 $('.sidenav').sidenav('open')
.
我不想制作两个按钮。我该如何解决这个问题?
这是初始化侧边栏的函数:
$(document).ready(function () {
$('.sidenav').sidenav();
});
这是我的 HTML:
<ul id="slide-out" class="sidenav sidenav-fixed">
<li>
<div class="user-view">
<div class="background">
<img src="img/flag.png">
</div>
<a href="#user"><img class="circle" src="img/yuna.jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div>
</li>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
<li><a href="#!"><i class="material-icons">account_balance</i>Departments</a></li>
<li><a href="#!"><i class="material-icons">store</i>Regions</a></li>
<li><a href="#!"><i class="material-icons">description</i>Districts</a></li>
<li><a href="#!"><i class="material-icons">panorama</i>Cities</a></li>
<li><a href="#!"><i class="material-icons">time_to_leave</i>Vehicles</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
<li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
</ul>
我有一个带 class .sidenav-close
的按钮不起作用(这是默认设置)。我认为这是因为我的侧边栏是固定的。
是否有默认的打开和关闭方法?
这是我的按钮,需要 open/close 它:
<a href="#!" data-target="slide-out" class="sidenav-trigger rb_nav_btn">
<i class="material-icons">menu</i>
</a>
我考虑编写一个函数来检查边栏是否打开然后在 click
时关闭它,反之亦然。
固定导航栏并不意味着关闭...它的唯一意义是提供一种快速实现始终可见的导航栏的方法。所以你要问的基本上是在初始化后立即打开一个简单的导航栏......简单导航栏和固定导航栏之间的唯一区别是后者开始打开。
顺便说一句,如您所想,您可以使用 Docs 中所说的 属性 instance.isOpen
到 检查 如果 sidenav 打开.如果是关闭它,否则打开它。我使用了浮动按钮并评论了sidenav的默认触发器,因为它的功能被浮动按钮取代了。
注意:为了看到它的实际效果,您需要 运行 代码片段并单击 FULL PAGE link,否则您将看不到导航栏,您必须手动打开它。这是因为如果 window 的宽度小于 992:
,那么查看代码似乎 Sidenav 会自行关闭来源:materialize.js (第 5834 行)
value: function _handleWindowResize() {
// Only handle horizontal resizes
if (this.lastWindowWidth !== window.innerWidth) {
if (window.innerWidth > 992) {
this.open();
} else {
this.close();
}
}
this.lastWindowWidth = window.innerWidth;
this.lastWindowHeight = window.innerHeight;
}
这是您的脚本:
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".sidenav");
var options = {};
var instances = M.Sidenav.init(elems, options);
document
.querySelector("#toggle_sidenav")
.addEventListener("click", function() {
var elem = document.querySelector(".sidenav");
var instance = M.Sidenav.getInstance(elem);
if (instance.isOpen) {
console.log("Is open: I need to close it");
instance.close();
} else {
console.log("Is closed: I need to open it");
instance.open();
}
});
});
header, main, footer {
padding-left: 300px;
}
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 0;
}
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul id="slide-out" class="sidenav sidenav-fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<!-- <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a> -->
<div style='position: absolute; bottom:10px; right:10px'>
<a id="toggle_sidenav" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>