简体   繁体   中英

How to make bootstrap nav-pills close on click?

I'm trying to make buttons in a side-bar navigation (using the bootstrap framewrk) close or collapse onclick.

If you follow the link below to see a working template you'll see what I mean - the left hand column has a button called "ShortCut" which if clicked allows a dropdown of other links which works great....

However....I'd like it so that when it is clicked again it closes and reverts to as it was originally...

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

My thoughts are that it is something to do with javascript which is below:

$("#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();});

The line below must be able to do what I am trying to do - I just cant figure it out...thanks for all help...

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

nav-pills is only a css style that doesn't have a js actions.

Perhaps you're confused.

.

Possibly you can use Accordion( http://getbootstrap.com/javascript/#collapse-example-accordion ) with nav-pill styling,

or use jquery .slideUp() and .slideDown() to get it done manually.

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

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

.

The code you provided uses following part to collapse/open

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

我可能会误解您的问题,但是您始终可以通过删除“活动”类来隐藏药丸。

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM