首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何让bootstrap nav-pills在点击时关闭?

如何让bootstrap nav-pills在点击时关闭?
EN

Stack Overflow用户
提问于 2015-08-02 20:02:15
回答 2查看 1.2K关注 0票数 1

我正在尝试让侧边栏导航中的按钮(使用bootstrap framewrk)关闭或折叠onclick。

如果你点击下面的链接来查看工作模板,你就会明白我的意思--左栏有一个名为"ShortCut“的按钮,如果点击它,就会出现其他链接的下拉列表,效果很好……

但是……我希望当再次点击它时,它会关闭并恢复到原来的状态……

http://seegatesite.com/bootstrap/simple_sidebar_menu.html

我的想法是这与javascript有关,如下所示:

代码语言:javascript
复制
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
 $("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled-2");
    $('#menu ul').hide();
});

 function initMenu() {
  $('#menu ul').hide();
  $('#menu ul').children('.current').parent().show();
  //$('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

下面的行必须能够做我正在尝试做的事情-我只是不能认为它的所有帮助out...thanks…

代码语言:javascript
复制
 $('#menu li a').click( 
EN

回答 2

Stack Overflow用户

发布于 2015-08-02 20:12:23

nav-pills只是一种css样式,没有js操作。

也许你搞混了。

你可以使用Accordion(http://getbootstrap.com/javascript/#collapse-example-accordion)和nav-pill样式,

或者使用jquery .slideUp()和.slideDown()手动完成。

http://api.jquery.com/slideup/

http://api.jquery.com/slidedown/

您提供的代码使用以下部分来折叠/打开

代码语言:javascript
复制
$('#menu ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
票数 0
EN

Stack Overflow用户

发布于 2017-08-19 06:19:45

我可能误解了你的问题,但是你可以通过删除"active“类来隐藏药丸。

代码语言:javascript
复制
$('#item').removeClass('active');
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31771708

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档