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

时间:2015-08-02 12:02:15

标签: javascript jquery css twitter-bootstrap

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

如果您按照以下链接查看工作模板,您将会看到我的意思 - 左侧栏中有一个名为" ShortCut"如果点击它允许下拉其他很好的链接....

然而......我喜欢它,以便当它再次被点击时它会关闭并恢复到原来的状态......

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

我的想法是它与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();});

下面的一行必须能够做我想做的事情 - 我只是无法弄清楚...感谢所有的帮助......

 $('#menu li a').click( 

2 个答案:

答案 0 :(得分:0)

nav-pills只是一种没有js动作的CSS样式。

也许你很困惑。

可能你可以使用手风琴(http://getbootstrap.com/javascript/#collapse-example-accordion)和导航丸造型,

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

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

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

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

$('#menu ul:visible').slideUp('normal');
    checkElement.slideDown('normal');

答案 1 :(得分:0)

我可能会误解你的问题,但你总是可以通过删除“活跃”课来隐藏药片。

$('#item').removeClass('active');