Схаваць Twitter Bootstrap калапс нав на клік

Гэта не падменіць выпадальнае, катэгорыя з'яўляецца клас літый, як на малюнку:

enter image description here

<�Р> Пры выбары катэгорыі з спагадлівага меню (шаблон проста   адна старонка), я хачу, каб аўтаматычна хаваць нав калапс пры націску.   Таксама прагуляйцеся выкарыстоўваць у якасці навігацыі, паколькі шаблон мае толькі адзін   стар. Я шукаю рашэнне, якое не ўплывае на гэта, вось HTML код   меню:
    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      
         
      Carousel Demo
      <div class="nav-collapse">
        
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
124
Калі вы не хочаце, каб паспрабаваць і параўнаць усе гэтыя рашэнні тут самастойна, рэдагаваць # 1 з гэтага адказу з'яўляецца тое, што вы павінны рабіць.
дададзена аўтар caw, крыніца
<�Б> Бутстрап 4 метад: stackoverflow.com/questions/42401606/…
дададзена аўтар ZimSystem, крыніца
дададзена аўтар chrylis, крыніца
і маё рашэнне працаваць ці не?
дададзена аўтар WooCaSh, крыніца
Прыемна чуць, што.
дададзена аўтар WooCaSh, крыніца
Вы можаце ўбачыць мой адказ тут stackoverflow.com/пытанні/14248194/& hellip;
дададзена аўтар Camel, крыніца
@WooCaSh працаваў, а парадак іх вырашэння custom.js было няправільна, я заўважыў, $ ( «нав а»). На ( «пстрычка», функцыя() {і ў маім выпадку гэта клас, то $ ( «нав а"). На ( "націсніце», функцыя() {. Дзякуй, вы мне вельмі дапамаглі!
дададзена аўтар Tim Vitor, крыніца

29 адказы

паспрабуйце гэта:

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});
152
дададзена
Гэта выклікае праблемы ў навігацыйнай панэлі. Лепш выкарыстоўваць $ калапс ( 'схаваць «) (» нав калапсу.). на падзеі націску, а не зрабіць кнопку пераключэння пстрычкі.
дададзена аўтар Rohan, крыніца
гэты трук выклікае памылку ў стале ... OnClick Navs перамыкае вышыню таксама ...
дададзена аўтар SaurabhLP, крыніца
Гэта працавала выдатна. Дзякуючы WooCaSh. Акрамя таго, толькі прапанаваў дадаць «» да кода да $ ( 'нав а') => $ ( 'нав а'). [Селектар класа прапускаў кропку «»]
дададзена аўтар Clain Dsilva, крыніца
JQuery ( 'NavBar-калапс.') AddClass ( 'калапс'). быў найбольш эфектыўным метадам у Bootstrap 3.
дададзена аўтар Michael, крыніца
Дзякуючы @Ronan, пасля спробы ўсе рашэнні, ваш лепшы адзін на мабільны і працоўны стол. Вы выратавалі мой дзень і павінен атрымаць «правільны адказ».
дададзена аўтар xBill, крыніца
На самай справе, $ ( '# Navbar') калапс ( 'схаваць') ;. зрабіць трук!
дададзена аўтар candlejack, крыніца
Згортванне навігацыі павінна быць зроблена з пачатковай загрузкай. Вы маеце пабудаваць яго з пачатковай загрузкай, выправіць яго з пачатковай загрузкай, калі гэта магчыма: паглядзіце на адказ Zu1779 і каментарах. Спосаб ачысткі і робіць нашмат больш сэнсу. Спосаб справіцца з гэтым можна ў самой пачатковай загрузцы, таму ігнараваць гэта?
дададзена аўтар Nrzonline, крыніца
калі адкрыта меню вы можаце бачыць, што ёсць "в" класе актыўнага <div клас = «NavBar калапсу калапсу тэкст цэнтра ў» ID = «БС-прыклад-Navbar калапс-1» арыя вспененный = "праўдзівы «> проста трэба выдаліць" ў "там і працаваў $ (» NavBar-калапс. ') removeClass (' в) ;.
дададзена аўтар Braham Dev Yadav, крыніца
FYI, гэта не працуе ва ўсіх выпадках. Калі акно паўторна памеру і выводзіць мабільнае меню яна будзе адкрыта па змаўчанні.
дададзена аўтар Andrew Boes, крыніца
Калі ў вас ёсць выпадаючыя ў панэлі навігацыі, вы не хочаце, каб згарнуць пры націску на выпадальным спісе. Гэта працуе для мяне: $ ( 'СЧА: не (.dropdown) а'). На (...
дададзена аўтар Ruvi Lecamwasam, крыніца
Калі Navbar працуе ў рэжыме «працоўнага стала» будзе мігацець або зачыніць затым зноў пры выкарыстанні гэтага.
дададзена аўтар mlapaglia, крыніца
Гэта працавала выдатна. Дзякуючы.
дададзена аўтар Amro Shafie, крыніца
АБНАЎЛЕННЕ: Звычайны селектар для пачатковай загрузкі 3 з'яўляецца .navbar-перамыкачом, таму $ ( "NavBar-перамыкач.") Націсніце() ;.
дададзена аўтар Richard, крыніца

Я проста капіююць 2 атрыбуты БТН-NavBar ( дата-тумблер = «калапс» дадзеных мэтавай = «nav-collapse.in» ) на кожным звяне, як гэта:

<div class="nav-collapse">
  
</div>

У Bootstrap 4 NavBar , у зменены на паказаць так што сінтаксіс будзе выглядаць так:

<�Код> дадзеныя пераключэнне = «калапс» дадзеныя мэтавыя = «navbar-collapse.show»

120
дададзена
Даданне дадзеных пераключэння і дадзеных мэтавай да <�літый> чысцей раствор. Дзякуючы.
дададзена аўтар trante, крыніца
Дае NavBar анімацыі (хутка разгарнуць/згарнуць) на пстрычкі Navbar пункта. Гэта адбываецца нават тады, калі кнопка Распад ня паказаная. Не ідэальна.
дададзена аўтар lostintranslation, крыніца
Не забудзьцеся замяніць .nav-калапс з .navbar калапсам для пачатковай загрузкі 3
дададзена аўтар kuceram, крыніца
Значна лепш, чым ручной сцэнар, цалкам Hacky Тхо
дададзена аўтар Jean-Bernard Jansen, крыніца
Добра працуе на мабільных прыладах, але выклікае NavBar калапс анімацыі на працоўным стале таксама, што непажадана.
дададзена аўтар James Brewer, крыніца
Ці будзе гэта даданне да элемента цела быць дрэннай ідэяй, калі б я хацеў, каб згарнуць меню, калі хто-то пстрыкае дзе-небудзь на гэтай старонцы?
дададзена аўтар Alesana, крыніца
Мне падабаецца гэтая версія не-ручной сцэнар. Лепш з іншымі сістэмамі
дададзена аўтар Stalin Gino, крыніца
Ніца адзін, працуе добра, дзякуй.
дададзена аўтар mlo55, крыніца
Гэта павінна быць прынята адказваць! Дзякуй за размяшчэнне гэтага!
дададзена аўтар trixtur, крыніца
@JamesBrewer Каб пазбегнуць калапсу анімацыі на настольную версіі дадаць у дадзенай-мішэні: «nav-collapse.in» дадзеныя тумблер = «калапс» дадзеныя мэтавай =
дададзена аўтар Daghall, крыніца
$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});
55
дададзена
На Bootstrap 4, гэта .navbar-Toggler . Ва ўсякім выпадку, супер працоўны код, дзякуй!
дададзена аўтар Xdg, крыніца
дзякуй чувак. Вы выратавалі мой свет !!!
дададзена аўтар muoki_D, крыніца
Я змагаўся з гэтай праблемай на працягу некалькіх гадзін! Гэта зрабіў трук!
дададзена аўтар PhillipOReilly, крыніца
Гэта лепшае рашэнне, так як ён прадухіляе збой, калі спасылкі не бачныя.
дададзена аўтар Bruno Dias, крыніца

Лепш выкарыстоўваць па змаўчанні метады :

$('.nav a').click(function(){
    $('.nav-collapse').collapse('hide');
});
41
дададзена
Для мяне, на маім прыкладзе старонкі пачатковай загрузкі 4, замест .nav а Я павінен быў выкарыстаць .navbar а
дададзена аўтар alexandre1985, крыніца
Гэта лепшае рашэнне, якое я знайшоў да гэтага часу. Дзякуй. Толькі невялікае паляпшэнне я зрабіў: замяніць .nav а Селектар па гэтым: .nav а: не (.dropdown-тумблер)
дададзена аўтар mneute, крыніца
Вызначана лепш, чым пры выкарыстанні функцыі пстрычкі! Лепш за ўсё трымаць рызыку да мінімуму, узаемадзейнічаючы толькі з рэчамі, якія вы хочаце змяніць. Падзея пстрычкі можа выклікаць дадатковыя непажаданыя функцыі для выканання. Не ведаў аб гэтым метадзе калапсу, дзякуй.
дададзена аўтар Andrew, крыніца

Яшчэ больш элегантны без лізаць дубляваць кода, каб проста ўжыць дата-тумблер = «калапс» і дадзеных мэтавых = «нав-калапс» атрыбуты да Nav сябе:


Супер чысты, не патрабуецца JavaScript. Выдатна працуе, так доўга, як ваш файл нав а элементы маюць шмат досыць водступаў для тоўстых пальцаў, і вы не прадухілілі клік падзеі кіпячага праз e.stopPropagation() Калі карыстальнік націсніце нав а элементаў.

30
дададзена
Гэта правільныя самазагрузкі спосаб выканання гэтых паводзін.
дададзена аўтар Vítor de Almeida, крыніца
У Bootstrap 4 было б <div клас = "калапс Navbar калапсу" дадзеных тумблер = "калапс" дадзеных мэтавых = "NavBar-калапс">
дададзена аўтар JoshJoe, крыніца
Лепш за ўсё пра гэта ён працуе з кутнім 4 у routerLink у той час як іншыя рашэнні не робяць!
дададзена аўтар stt106, крыніца
Элегантнае рашэнне!
дададзена аўтар Bishbulb, крыніца
Я хацеў бы прапанаваць змены ў мэту ўключыць у клас, а таксама. Гэта дазволіць прадухіліць настольную версію ад сябе дзіўна. <�Код> дадзеных мэтавых = "nav-collapse.in"
дададзена аўтар Dave, крыніца

Абнавіце сваю

  • About
  •  
    

    у

  • About
  •  
    

    Гэта простае змена працуе для мяне.

    Ref: https://github.com/twbs/bootstrap/issues/9013

    15
    дададзена
    У «стандартным» Студыя галоўнай старонкі Візуальнай, гэта прывядзе да знікаць меню гамбургера і без якіх-небудзь опцый меню. Гэты адказ працуе толькі з пэўнай планоўкай канфігурацыі меню (якія не забяспечваюць у якасці прыкладу).
    дададзена аўтар Gone Coding, крыніца
    Гэта больш не будзе працаваць. выкарыстоўваць Дадзеныя-мішэнь = «navbar-collapse.in» , як з новым стандартам пачатковай загрузкі. <�Код> .у клас для прадухілення анімацыі, калі на працоўным стале
    дададзена аўтар philip oghenerobo balogun, крыніца
    Ўзгоднена. Гэта правільны шлях для дасягнення гэтай мэты. Няма неабходнасці ў JQuery. Я не разумею, чаму гэта стала настолькі мала upvotes/увагі.
    дададзена аўтар wahwahwah, крыніца
    Гэта павінна быць прынята адказваць. Выдатна працуе са стандартнымі пагадненнямі бутстраповских.
    дададзена аўтар Bradley, крыніца
    Я выкарыстаў гэтае рашэнне ў маёй сітуацыі, але выкарыстаў ідэнтыфікатар майго div.navbar калапсу элемент, як дата-мішэнь параметр.
    дададзена аўтар maxathousand, крыніца
    Гэта лепшае рашэнне для каго-то з дапамогай Кутняе, дзе змешваючыся jQuery знаходзіцца па-за разгляду
    дададзена аўтар Daniel Arechiga, крыніца

    Рух павінна быць зачыненая ў любы час, калі карыстальнік націскае на любым участку цела - не толькі навігацыйныя элементы. Скажам адкрыта меню, але карыстальнік пстрыкае ў целе старонкі. Карыстальнік чакае ўбачыць меню з блізкай адлегласьці.

    Вы таксама павінны пераканацца, што кнопка пераключэння бачная, у адваротным выпадку пераход бачны ў меню.

    $(document).ready(function() { 
    
    $("body").click(function(event) {
           //only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
             if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
                $('.navbar-collapse').collapse('toggle');
            }
      });
    
    });
    
    13
    дададзена
    «Элементы лічацца бачнымі, калі яны спажываюць прастору ў дакуменце.» Ваш код павінен быў прадухіліць крах, калі Navbar калапс не бачны на экране, але гэта не так.
    дададзена аўтар Steve M, крыніца
    Не толькі, што гэта працуе, але гэта таксама адзінае рашэнне, якое працуе для мяне, самазагрузкі> 3.
    дададзена аўтар ALEX_AME, крыніца
    Працуе выдатна падыходзіць для мяне, дзякуй :)
    дададзена аўтар antsyawn, крыніца

    Праверана на Bootstrap 3.3.6 - праца ў!

    <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

    $('.nav a').click(function() {
        $('.navbar-collapse').collapse('hide');
    });
    </div> </div>
    13
    дададзена

    Try this > Bootstrap 3

    Brilliant exacly тое, што я шукаў, але ў мяне былі некаторыя сутычкі з JavaScript і пачатковай загрузкі мадальны, гэта зафіксаваў яго.

        $(function() {
        $('.navbar-nav').on('click', function(){ 
            if($('.navbar-header .navbar-toggle').css('display') !='none'){
                $(".navbar-header .navbar-toggle").trigger( "click" );
            }
        });
    });
    

    Спадзяюся, што гэта дапамагае.

    7
    дададзена

    Гэта добра працавала для мяне. Яго так жа, як прынята адказваць, але ліквідуе праблему, звязаную з настольным/гледжання планшэта

    <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

    $('.navbar-nav a').on('click', function() {
            if (window.innerWidth <= 768) {
                $(".navbar-toggle").click();
            }
        });
    </div> </div>
    5
    дададзена
    window.innerWidth <= 767 лепш;) або window.innerWidth <768
    дададзена аўтар Alex Tape, крыніца
    Гэта павінна быць абрана ў якасці верхняга адказу. Аднак, гэта не працуе з падзеннем падзеннем. Я усталяваў яго, замяніўшы селектар з: ( 'NavBar-Nav') $ знайсці ( 'а: не ( "выпадаць-тумблер")').
    дададзена аўтар Erikas, крыніца

    <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

    $('.nav a').click(function() {
        $('.navbar-collapse').collapse('hide');
    });
    </div> </div>
    5
    дададзена
    Гэта працуе для мяне. У мяне ёсць Navbar на кожным Кенда гледжання, так што мне трэба, каб закрыць іх на beforeShow падзеі.
    дададзена аўтар xinthose, крыніца

    Я думаю, што лепш выкарыстоўваць collapse.js метады па змаўчанні Bootstrap 3 , выкарыстоўваючы .navbar -collapse у якасці складанага элемента, які вы хочаце, каб схаваць, як паказана ніжэй.

    Іншыя рашэнні могуць выклікаць іншыя непажаданыя праблемы з адлюстраваннем элементаў шляху або функцыяй ў вашай вэб-старонцы. Такім чынам, у той час як некаторыя рашэнні могуць здацца выправіць зыходную задачу вельмі можа ўвесці іншыя, таму пераканайцеся, што вы бяжыце дбайнае тэставанне вашага сайта пасля любога выпраўлення.

    Каб убачыць гэты код у дзеянні:

    <�Ол>   
    • Націсніце кнопку "Выканаць гэты код" ніжэй.
    •   
    • Націсніце кнопку "Full Page".
    •   
    • акно Маштаб да выпадальны ня актывуе.
    •   
    • Затым абярыце пункт меню і вуаля!
    •   </Ол>

    Ура!

    <div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

    $('.nav a').click(function() {
      $('.navbar-collapse').collapse('hide');  
    });
    
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="author" content="Franciscus Agnew">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap Navbar Collapse Function</title>
    
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        
    4
    дададзена
    Гэта нашмат лепш, чым у цяперашні час прыняты адказ. З гэтым адзін, я атрымліваю прывід анімацыі на працоўным стале.
    дададзена аўтар Cody, крыніца

    На кожнай лініі спадальнай змясціць дадзеныя рычажкоў = «калапс» і дадзеныя мэтавыя = «нав-калапс», дзе нав-калапс імя вы даеце яго ў спіс.

    
    

    Гэта выдатна працуе на экране, якія маюць выпадальны спіс, як мабільныя экраны, але і на працоўным стале і таблеткі ён стварае Flickr. Гэта адбываецца таму, што ўжываецца клас .collapsing. Каб выдаліць Flickr я стварыў медыя-запыт і ўставіць перапаўненне схаванага ў руйнуюць класе.

    @media (min-width: 768px) {
    .collapsing {
        overflow: inherit;
      }
    }
    
    3
    дададзена

    Adding the data-toggle="collapse" data-target=".navbar-collapse.in" to the tag worked for me.

    <div>
    
            <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
              
              
              
            </button>
        </div>
                <div class="navbar-collapse collapse">
                
        </div>
    
    3
    дададзена

    Вось як я гэта зрабіў. Калі ёсць гладчэйшы шлях, калі ласка, скажыце, калі ласка.

    Inside the tags where the links for the menu are I added this code:

    onclick="$('.navbar-toggle').click()"
    

    Яна захоўвае слайд-анімацыі. Такім чынам, у поўнай меры выкарыстаць гэта будзе выглядаць наступным чынам:

    2
    дададзена

    Для тых, хто заўважыў настольную NavBars мігоча пры выкарыстанні гэтага рашэння:

    $('.nav a').on('click', function(){
        $(".navbar-collapse").collapse('hide');
    }); 
    

    Простае рашэнне гэтай праблемы з'яўляецца спасылацца на згорнуты Navbar толькі шляхам праверкі на наяўнасць «у»:

    $('.navbar-collapse .nav a').on('click', function(){
        if($('.navbar-collapse').hasClass('in'))
        {
            $(".navbar-collapse").collapse('hide');
        }
    });
    

    Гэта згортвае Navbar па пстрычцы, калі Navbar ў мабільным рэжыме, але пакінуць у спакоі настольнай версіі. Гэта дазваляе пазбегнуць мігатлівы многія людзі сталі сведкамі падзей, якія адбываюцца на настольных версіях.

    Акрамя таго, калі ў вас ёсць Navbar з выпадальнае меню вы не зможаце ўбачыць іх у якасці навігацыйнай панэлі будзе схаваны, як толькі вы націснеце на іх, так што калі ў вас ёсць выпадальнае меню (як я !), выкарыстоўвайце наступнае:

    $('.nav a').on('click', function(e){
        if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
        {
            $(".navbar-collapse").collapse('hide');
        }
    });
    

    Гэта выглядае для прысутнасці класа спадальнага вышэй спасылцы пстрыкнула ў DOM, калі ён існуе, то спасылка збіралася запусціць выпадальнае меню і, такім чынам, меню не схаваная. Пры націску на спасылку ў расчыняецца меню, то Navbar схавае правільна.

    1
    дададзена

    Гэта лепшае рашэнне, якое я выкарыстаў.

    $(document).ready(function() {
    
            $('.nav a').on('click', function() {
    
                if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
                if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
            });
    
        });
    
    1
    дададзена

    Я праверыў у меню адкрываецца шляхам праверкі "в" класе, а затым запусціць код.

    $('.navbar-collapse a').on('click', function(){
        if ( $( '.navbar-collapse' ).hasClass('in') ) {
            $('.navbar-toggle').click();
        }
    });
    

    працуе выдатна.

    1
    дададзена
    $("body,.nav a").click(function (event) {
    
       //only do this if navigation is visible, otherwise you see jump in
        //navigation while collapse() iS called 
        if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
        $('.navbar-collapse').collapse('toggle');
      }
    });
    
    1
    дададзена
    $(function() {
        $('.nav a').on('click touchstart', function(){ 
            if($('.navbar-toggle').css('display') !='none'){
                $(".navbar-toggle").trigger( "click" );
            }
        });
    });
    

    // Заўвага я дадаў «touchstart» для мабільнага дотыку. touchstart/канец не мае затрымкі

    1
    дададзена

    100% рабочы: -

    Дадаць у HTML

    <div id="myMenu" class="nav-collapse">
    

    Javascript

     $(function(){ 
     var navMain = $("#myMenu");
     navMain.on("click", "a", null, function() {
         navMain.collapse('hide');
     });
    });
    
    1
    дададзена

    Bootstrap3 карыстальнікі спрабуюць прыведзеныя ніжэй код. Ён працаваў для мяне.

    function close_toggle() {
       if ($(window).width() <= 768) {
          $('.nav a').on('click', function(){
              $(".navbar-toggle").click();
          });
       }
       else {
         $('.nav a').off('click');
       }
    }
    close_toggle();
    
    $(window).resize(close_toggle);
    
    0
    дададзена

    Мабільны выгляд: <�моцны> як схаваць пераключыць навігацыю ў загрузніку + выпадальнага меню + jQuery + scrollto з элементаў навігацыі, які паказвае на якарах Іды на той жа старонцы , шаблон/адна старонка

    Пытанне, які я эксперыментаваў з любым з прыведзеных вышэй рашэнняў было тое, што яны руйнуюцца толькі тыя пункты падменю, у той час як меню навігацыі ня зруйнуецца.

    Так што я зрабіў мае думкі .. і што мы можам назіраць? Ну, кожны раз, калі мы/карыстальнікаў пстрыкніце спасылку scrollto, мы хочам, каб старонка, каб перайсці да гэтай пазіцыі і адначасова, згарнуць меню, каб аднавіць выгляд старонкі.

    Ну ... чаму б не прызначыць гэтую працу функцыі scrollto? лёгка :-)

    Такім чынам, у двух кодаў

    // scroll to top action
    $('.scroll-top').on('click', function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop:0}, 'slow');
    

    і

    // scroll function
    function scrollToID(id, speed){
    var offSet = 67;
    var targetOffset = $(id).offset().top - offSet;
    var mainNav = $('#main-nav');
        $('html,body').animate({scrollTop:targetOffset}, speed);
    if (mainNav.hasClass("open")) {
        mainNav.css("height", "1px").removeClass("in").addClass("collapse");
        mainNav.removeClass("open");
    }
    

    I've just added the same commі in both the functions

        if($('.navbar-toggle').css('display') !='none'){
        $(".navbar-toggle").trigger( "click" );
    }
    

    (Прэстыжнасць аднаго з названых вышэй аўтараў)

    як гэта (тое ж самае павінна быць дададзена да абодвух пракручваецца)

    $('.scroll-top').on('click', function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop:0}, 'slow');
    if($('.navbar-toggle').css('display') !='none'){
        $(".navbar-toggle").trigger( "click" );
    }
    });
    

    if you wanna see it in action just check it out recupero dati da NAS

    0
    дададзена

    I posted a solution that works with Aurelia here: https://stackoverflow.com/a/41465905/6466378

    Праблема заключаецца ў тым, вы не можаце проста дадаць дата-тумблер = «калапсу» і дадзеныя мэтавых = "# Navbar» для вашых элементаў а. І jQuery не працуе венна ў Aurelia або кутняй асяроддзе.

    Лепшае рашэнне для мяне было стварыць карыстацкі атрыбут, які праслухоўвае адпаведны запыт СМІ і дадае ў дата-тумблер = «калапс» атрыбут пры жаданні:

    ...

    Карыстацкі атрыбут з Aurelia выглядае наступным чынам:

    <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

    import {autoinject} from 'aurelia-framework';
    
    @autoinject
    export class CollapseToggleIfLess768CustomAttribute {
      element: Element;
    
      constructor(element: Element) {
        this.element = element;
        var mql = window.matchMedia("(min-width: 768px)");
        mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
        this.handleMediaChange(mql);
      }
    
      handleMediaChange(mediaQueryList: MediaQueryList) {
        if (mediaQueryList.matches) {
          var dataToggle = this.element.attributes.getNamedItem("data-toggle");
          if (dataToggle) {
            this.element.attributes.removeNamedItem("data-toggle");
          }
        } else {
          var dataToggle = this.element.attributes.getNamedItem("data-toggle");
          if (!dataToggle) {
            var dataToggle = document.createAttribute("data-toggle");
            dataToggle.value = "collapse";
            this.element.attributes.setNamedItem(dataToggle);
          }
        }
      }
    }
    </div> </div>
    0
    дададзена

    Я на Bootstrap 4, выкарыстоўваючы fullPage.js з фіксаванай верхняй навігацыйнай панэлі і выпрабавалі ўсе пералічаныя тут, са змяшанымі вынікамі.

    • Tried the best, clean way :

      data-toggle="collapse" data-target=".navbar-collapse.show"
      

      The menu would collapse, but the href links wouldn't lead anywhere.

    • Tried the logical other ways :

      $('myClickableElements').on('click touchstart', function(){
        $(".navbar-collapse.show").collapse('hide');
       //or
        $(".navbar-collapse.show").collapse('toggle');
       //or
        $('.navbar-toggler').click()
      });
      

      There would be some weird behavior because of the touchstart event : the clicked buttons would end up not be the ones I actually clicked, hence breaking the links. Plus it would add the .show class to some other unrelated dropdowns in my nav, causing some more weird stuff.

    • Tried to change div to li
    • Tried to e.preventDefault() and e.stopPropagation()
    • Tried and tried more

    Нішто не будзе працаваць.

    Такім чынам, замест таго, я меў (дагэтуль) цудоўнае ўяўленне пра тое, што рабіць:

    $(window).on('hashchange',function(){
       $(".navbar-collapse.show").collapse('hide');
    });
    

    У мяне ўжо быў матэрыял у гэтай функцыі hashchange, сі я проста павінен быў дадаць гэты радок.

    Гэта на самай справе робіць менавіта тое, што я хачу: руйнуючыся меню пры змене хэша (г.зн. пстрычкі вядучага кудысьці адбылося). І гэта добра, таму што цяпер я магу ёсць спасылкі ў маім меню, якое не паваляцца яго.

    Хто ведае, можа быць, гэта дапаможа камусьці ў маёй сітуацыі!

    І дзякуй усім, хто прымаў удзел у гэтай тэме, шмат інфармацыі, каб даведацца тут.

    0
    дададзена

    Іншае хуткае рашэнне для Bootstrap 3. * можа быць:

    $( document ).ready(function() {
        //
       //Hide collapsed menu on click
        //
        $('.nav a').each(function (idx, obj) {
            var selected = $(obj);
    
            selected.on('click', function() {
                if (selected.closest('.collapse.in').length > 0) {
                    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
                }
            });
        });
    });
    
    0
    дададзена

    Bootstrap ўсталёўвае .in клас на Collapse элемент для запуску анімацыі - каб адкрыць яго. Калі вы проста выдаліце ​​ клас, анімацыя не працуе, але будзе хаваць элемент - не зусім тое, што вы хочаце.

    Верагодна, хутчэй запусціць , калі заяву, каб праверыць, калі клас пачатковай загрузкі па змаўчанні быў усталяваны на элеменце.

    So this code just says:

    <�Р>, калі мой элемент мае клас ўжываецца, закрыць яго, выклікаючы Bootstrap анімацыю па змаўчанні. У адваротным выпадку запусціць па змаўчанні Bootstrap дзеянне/анімацыя адкрыцця яго
    $('#navbar a').on('click touchstart', function() {
       //if .in class is set on element, the element is visible – you want to hide it
        if ($('#navbar').hasClass('in')) {
           //collapse toggle will remove the .in class and animate the element closed 
            $('#navbar').collapse('toggle');
        }
    })
    
    0
    дададзена

    Гэта хавае навігацыйную калапс замест аніміраваць яго, але тое ж самае паняцце, як паказана вышэй адказ

    JS:

    $('.nav a').on('click', function() {
        $("#funk").toggleClass('in collapse');
    });
    

    HTML:

    <div class="navbar-collapse" id="funk">
    

    I prefer this on single page sites because I use localScroll.js that already animates.

    0
    дададзена

    Дадайце ідэнтыфікатар затым кожны

  • add data-target="myMenu" data-toggle="collapse" <div id="myMenu" class="nav-collapse"> </div>
  • 0
    дададзена