HTML – 如何编码侧边栏折叠闪亮只显示图标_html-js-css

概述如果您熟悉 the shiny website,您会注意到当您按下按钮折叠侧边栏时,它会显示更大的图标(但不会完全隐藏侧边栏. 你知道如何编写这个代码吗？我听说包装有光泽的BS可能是有用的或引导的东西,但我不明白它是什么. 折叠前： <body id="app" class="app ng-scope buffer-pinterest" data-custom-page="" data-off- 如果您熟悉 the shiny website,您会注意到当您按下按钮折叠侧边栏时,它会显示更大的图标(但不会完全隐藏侧边栏.

你知道如何编写这个代码吗？

我听说包装有光泽的BS可能是有用的或引导的东西,但我不明白它是什么.

折叠前：

<body ID="app"  data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

这个(见突出显示的文字)：

崩溃后：

<body ID="app"  data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

解决方法你可以通过两个很棒的库来帮助你实现这个目标：shinydashboard(获取基于adminLTE bootstrap主题的navbar)和shinyJs(包括模板的必要类).工作代码如下：

## app.R ##library(shiny)library(shinydashboard)library(shinyJs)ui <- dashboardPage(  dashboardheader(),dashboardSIDebar(sIDebarMenu(menuItem('Test',icon = icon('phone'),tabname = 'sampletabname'))),dashboardBody(h3('Test app'),useShinyJs()))server <- function(input,output) {  runjs('        var el2 = document.querySelector(".skin-blue");        el2.classname = "skin-blue sIDebar-mini";        ')}shinyApp(ui,server)

编辑：
为了解决评论中提到的问题,我使用visibility：hIDden CSS样式.应用程序服务器部分的新内容(其余部分保持不变)：

runjs({'        var el2 = document.querySelector(".skin-blue");        el2.classname = "skin-blue sIDebar-mini";        var clicker = document.querySelector(".sIDebar-toggle");        clicker.ID = "switchState";    '})  onclick('switchState',runjs({'        var Title = document.querySelector(".logo")        if (Title.style.visibility == "hIDden") {          Title.style.visibility = "visible";        } else {          Title.style.visibility = "hIDden";        }  '}))

总结

以上是内存溢出为你收集整理的HTML – 如何编码侧边栏折叠闪亮只显示图标全部内容，希望文章能够帮你解决HTML – 如何编码侧边栏折叠闪亮只显示图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1087066.html

HTML – 如何编码侧边栏折叠闪亮只显示图标

发表评论

评论列表（0条）