默认情况下关闭侧边栏。引导程序

时间:2020-06-03 16:46:50

标签: jquery twitter-bootstrap

我使用的是Bootstrap模板,到目前为止一切都比较好,或者我想将“ Close”设置为默认的侧边栏。我在网上尝试了一些技巧,没有任何改变。我的重点是如何在加载页面时隐藏边栏?这里是我要适应的代码:

/ *! *启动Bootstrap-SB Admin 2 v4.0.7(https://startbootstrap.com/template-overviews/sb-admin-2) *版权所有2013-2019 Start Bootstrap *根据MIT(https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE)许可 * /

!function(t){
  "use strict";
   $("#sidebarToggle, #sidebarToggleTop").on("click",function(o){
    $("body").toggleClass("sidebar-toggled"),$(".sidebar").toggleClass("toggled"),$(".sidebar").hasClass("toggled")&&
    t(".sidebar .collapse").collapse("hide")}),t(window).resize(function(){t(window).width()<768&&t(".sidebar .collapse").collapse("hide")
    }),
t("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(o){if(768<t(window).width()){
    var e=o.originalEvent,l=e.wheelDelta||-e.detail;this.scrollTop+=30*(l<0?1:-1),o.preventDefault()
    }
    }),t(document).on("scroll",function(){
        100<t(this).scrollTop()?t(".scroll-to-top").fadeIn():t(".scroll-to-top").fadeOut()
        }
        ),t(document).on("click","a.scroll-to-top",function(o){
            var e=t(this);t("html, body").stop().animate({scrollTop:t(e.attr("href")).offset().top},1e3,"easeInOutExpo"),o.preventDefault()
}
)}(jQuery);

我有一个包含边栏的引导程序模板。边栏默认情况下处于打开状态,但我希望它默认情况下处于关闭状态,因此,当用户加载网站时,他必须先单击按钮,然后才能打开边栏。

enter image description here enter image description here

1 个答案:

答案 0 :(得分:1)

您可以使用直接Javascript控制边栏。我也遇到了jQuery的问题。

// Sidebar Controlling Javascript Code
// #CategorySidebarID is the id of sidebar

document.getElementById("CategorySidebarID").style.display = "none";

// Call this function from which button it will be open.
function sidebar_open() {
  document.getElementById("CategorySidebarID").style.display = "block";
}

// Same as open, close button.
function sidebar_close() {
  document.getElementById("CategorySidebarID").style.display = "none";
}