Question

您好我正在使用Bootstrap framework v3.3.4在一个网站上工作。当我点击切换按钮时，移动导航栏打开，我想要滑动以关闭导航。

this is an image description of the issue

有可能吗？

Answer 1

您可以使用jquery通过添加类navbar-shrink来折叠滚动条带。我使用#Nav作为导航的id只是为了一个例子，并根据你的页面调整偏移量。

$(window).scroll(function() {
    if ($("#Nav").offset().top > 100) {
        $("#Nav").addClass("shrink");
    } else {
        $("#Nav").removeClass("shrink");
    }

});

Answer 2

你可以像下面那样使用jquery

<!doctype html>
<html lang="en"> 
<head>
 <meta charset="utf-8">
<title>slideUp demo</title>
 <style>
   div {
   background: #3d9a44;
    margin: 3px;
     width: 80px;
    height: 40px;
   float: left;
   }
  </style>
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 </head>
<body>

   Click me!
     <div></div>
     <div></div>
     <div></div>
       <div></div>
     <div></div>

 <script>
  $( document.body ).click(function() {
     if ( $( "div:first" ).is( ":hidden" ) ) {
       $( "div" ).show( "slow" );
      } else {
          $( "div" ).slideUp();
      }
   });
 </script>

</body> 
</html>

Answer 3

您需要添加移动触控（手势）库，例如https://github.com/benmajor/jQuery-Touch-Events，然后将其连接到导航栏...

// enable swipe up to close nav on mobile
$('#mN').bind('swipeup', function(e, touch) {
    $('[data-toggle="collapse"]').trigger('click');
});

Demo on Codeply

Answer 4

这是问题的答案

首先，我们需要将touch.js链接到您的标题

<script src="./js/touch.js"></script>

touch.js

var supportTouch = $.support.touch,
        scrollEvent = "touchmove scroll",
        touchStartEvent = supportTouch ? "touchstart" : "mousedown",
        touchStopEvent = supportTouch ? "touchend" : "mouseup",
        touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
    setup: function() {
        var thisObject = this;
        var $this = $(thisObject);
        $this.bind(touchStartEvent, function(event) {
            var data = event.originalEvent.touches ?
                    event.originalEvent.touches[ 0 ] :
                    event,
                    start = {
                        time: (new Date).getTime(),
                        coords: [ data.pageX, data.pageY ],
                        origin: $(event.target)
                    },
                    stop;

            function moveHandler(event) {
                if (!start) {
                    return;
                }
                var data = event.originalEvent.touches ?
                        event.originalEvent.touches[ 0 ] :
                        event;
                stop = {
                    time: (new Date).getTime(),
                    coords: [ data.pageX, data.pageY ]
                };

                // prevent scrolling
                if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                    event.preventDefault();
                }
            }
            $this
                    .bind(touchMoveEvent, moveHandler)
                    .one(touchStopEvent, function(event) {
                $this.unbind(touchMoveEvent, moveHandler);
                if (start && stop) {
                    if (stop.time - start.time < 1000 &&
                            Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
                            Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                        start.origin
                                .trigger("swipeupdown")
                                .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
                    }
                }
                start = stop = undefined;
            });
        });
    }
};
$.each({
    swipedown: "swipeupdown",
    swipeup: "swipeupdown"
}, function(event, sourceEvent){
    $.event.special[event] = {
        setup: function(){
            $(this).bind(sourceEvent, $.noop);
        }
    };
});

之后我们需要将bootstrap nav放入div，其中id =＆＃34; nav＆＃34;那样：

<div id="nav">
<nav class="navbar navbar-default navbar-fixed-top">
here is you navigation
</nav>
</div>

您可以使用此脚本激活swstup关闭bootstrap移动导航

$(document).ready(function(){
$('#nav').on('swipeup',function(){
    $('#menubtn').click();
} ); });

向上滑动以关闭引导程序移动导航栏

4 个答案: