Twitter Bootstrap мабільны навігацыйны: схаваць меню пасля націску спасылкі меню

Я шукаю спосаб зрабіць Twitter Bootstrap мабільны/таблетку Nav аўтаматычна схаваць/згарнуць пасля націску на спасылку меню. У мяне ёсць шмат пунктаў меню і таму, калі карыстальнікі пашырыць меню ў iPhone, яны бачаць толькі меню, а не на старонцы унізе. Гэта збівае з толку карыстальніка пры націску на спасылку меню, што робіць яго, здаецца, быццам нічога не адбылося пасля пстрычкі.

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

15
Вы кажаце, што пры націску кнопкі змены старонкі, але распоркі меню?
дададзена аўтар janos, крыніца
Вы можаце паказаць код вашага меню/навігацыі таксама? Што адбываецца, калі карыстальнік націскае на спасылку? Ці з'яўляецца ён адправіць на новую старонку?
дададзена аўтар Bass Jobsen, крыніца
прывязаць падзея OnClick да элементаў навігацыі, якія атрымліваюць націскалі, а затым схаваць навігацыю.
дададзена аўтар phoet, крыніца
Дзякуй, хлопцы, наткнуўся на форум, дзе хтосьці шукаў таго ж раствора і знайшоў вялікае выпраўленне, якое я адправіў ніжэй.
дададзена аўтар bjornfloki, крыніца

7 адказы

Калі вы выкарыстоўваеце BS3.x вы можаце згарнуць мабільны СЧА з разметкай, як гэта - зьвярніце ўвагу на «дадзеныя-тумблер» і «даныя-мішэнь» у разметцы для хатняй спасылкі:

  
19
дададзена
Там праблема з гэтым рашэннем. Яна таксама будзе перамыкаць меню, нават калі вэб-сайт у не ў мабільным дазволе. Які resulst ў вельмі дзіўным паводзінах.
дададзена аўтар RPDeshaies, крыніца
Дадайце гэтую частку як заяву, калі вы карыстаецеся падменяць калі ($ (e.target). ( 'А') && $ (e.target) .attr ( 'класа')! = «Выпадаючыя-перамыкач ')
дададзена аўтар Eranda, крыніца
Выпраўленне паводзінаў, якія @ Tareck117 паведамілі. jsfiddle.net/yq7c4/8
дададзена аўтар Geoffrey Ochsner, крыніца

Самы просты спосаб, які я знайшоў, каб выкарыстоўваць атрыбуты дадзеных на любых NavBar спасылак, дзе бурацца мабільнай навігацыйнай панэлі пажадана. Выкарыстоўвайце дадзеных мэтавых = «navbar-collapse.in» так што Navbar толькі тумблер ў яго адкрытым стане, а не кожны раз, калі націснутая спасылка.

Link

http://codeply.com/go/bp/lbIb5ZaHbq

9
дададзена
Гэта працуе як шарм. Працаваў для мяне.
дададзена аўтар Moses Ndeda, крыніца
Я хацеў бы галасаваць у гэтым больш. Гэта выдатнае рашэнне для кутніх 2+ праектаў і не патрабуе ніякіх дадатковых JavaScript.
дададзена аўтар a2ron44, крыніца

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

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

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

});
9
дададзена
Праблема з гэтым, калі мае спасылкі навігацыі выкарыстоўваюцца для анкернага пракруткі і я націсне непасрэдна на спасылцы пункт меню, гэта не будзе закрываць NavBar-калапс.
дададзена аўтар MichalCh, крыніца

Прыклад разметкі, як з Bootstrap дакументацыі :

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">

Close on menu item click

Add to your Javascript accordingly:

$('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
    $('#example-auto-collapse.in').collapse('hide');
}

Alternative: Close with any click

Like Charlie Dalsass suggested it might be preferable to also close the menu when clicking on the page. For that you can replace the Javascript above with the following:

$('body').click(function(e) {
   //don't close when opening a sub-menu in our menu
    if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
        $('#example-auto-collapse.in').collapse('hide');
    }
}

Even cleaner imo would be to bind and unbind this handler when the menu opens/closes and avoid running the handler in vain on every single click the user makes. It's very unlikely to have any noticeable impact though.


I created a stack exchange account just to upvote the answer by Skelly for it's simplicity. Then I found out how one can't upvote without reputation. Then I found out how that solution breaks ScrollSpy. Now this is the solution that works best for me without unwanted side effects.

3
дададзена

Калі вы выкарыстоўваеце падменю, вы павінны змяніць код @ user2562923 як наступныя:

        $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });
1
дададзена

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

Дадайце гэты ідэнтыфікатар ў разметцы:

1
дададзена

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

0
дададзена