单击任意页面时侧边栏导航的距离有多近？

时间：2018-05-18 10:56:20

标签： javascript jquery css

我有侧边栏导航，我创建了js来打开和关闭侧边栏图标上的侧边栏导航，它运行良好。但我想在点击页面的任何位置关闭侧边栏导航。这是我的js代码。

＆＃13;
＆＃13; 
    jQuery(document).ready(function(){
jQuery(document).ready(function(){
        $('.menu-item').addClass('menu-trigger');
  $('.menu-item').addClass('menu-trigger');
        $('.menu-trigger').click(function(){
  $('.menu-trigger').click(function(){
            $('#menu-trigger').toggleClass('clicked');
    $('#menu-trigger').toggleClass('clicked');
            $('.container').toggleClass('push');
    $('.container').toggleClass('push');
            $('.menu-type').toggleClass('open');
    $('.menu-type').toggleClass('open');
        });
  });
        $('body').click(function(){
  $('body').click(function(){
            $('.menu-type').toggleClass('close');
    $('.menu-type').toggleClass('close');
        });
  });
    });
});

</script>
＆＃13; 
This is my following navigation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-trigger" class="menu-trigger">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="menu-tint menu-trigger menu-type open"></div>
<div class="menu menu-type open">
  <div class="table">
    <div class="cell">
      <ul class="cd-navigation">

        <li class="current"><a href="#index-link">MENU</a></li>
        <li><a class="a-white" href="index.php"> Home </a></li>            
        <li><a href="#our_jurney" class="scroll-down smooth-scroll">Our Journey</a></li>             
        <li class="item-has-children">

          <a href="#0">About Us</a>

          <ul class="sub-menu">

          <li><a href="ethos.php">Company Ethos</a></li>

          <li><a href="joint_venture.php">Joint Ventures</a></li>

          </ul>

        </li> <!-- item-has-children -->

        <li class="item-has-children">

          <a href="#0">3 PL Solutions</a>

          <ul class="sub-menu" style="">

          <li><a href="distribution.php"> Distribution Centers</a></li>

          <li><a href="invetory.php">Inventory Management </a></li>

          <li><a href="threepl.php">Customs Clearance </a></li>

          <li><a href="transportation.php">Transportation – MTCL</a></li> 

          <li><a href="cold_chain.php">Cold Chain Management</a></li>

          <li><a href="it_management.php">IT- Multiline Business Solution </a></li>
          <li><a href="ar_management.php">AR Management</a></li>

          </ul>

        </li> <!-- item-has-children -->

        <li><a class="a-white" href="groupcompanies.php">Group Companies</a></li>



        <li><a href="#our_jurney1" class="scroll-down smooth-scroll">Case Studies</a></li>

        <li><a href="#our_jurney3" class="scroll-down smooth-scroll">Careers</a></li>
        <li><a href="#our_jurneyvalue" class="scroll-down smooth-scroll">Value Added Services</a></li>               <li><a href="#our_jurney4" class="scroll-down smooth-scroll">What Makes Us Different</a></li> 
        <li><a href="#our_jurney5" class="scroll-down smooth-scroll">Locations</a></li>
        <li><a href="gallery.php">Gallery</a></li>
        <li><a class="a-white" href="contact.php">Contact Us</a></li>
        <!-- item-has-children -->
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13; 此代码隐藏工作并在单击时显示（.menu-type）。当侧边栏导航打开然后我点击任何侧边栏导航是隐藏。

这是我的css 

#menu-trigger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  border-color: #2957a4;
  padding: 10px;
}

#menu-trigger div {
  position: relative;
  display: block;
  height: 5px;
  margin-bottom: 7px;
  width: 40px;
  background: #fff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: 1px 1px 2px #222;
  box-shadow: 1px 1px 2px #222;
}

#menu-trigger:hover {
  cursor: pointer;
  background: #2957a4;
  color: #fff;
  border-color: #2957a4;
  padding: 10px;
}

#menu-trigger:hover div:nth-child(odd) {
  width: 35px;
}

#menu-trigger:hover div:nth-child(even) {
  width: 25px;
}

#menu-trigger.clicked div:nth-child(even) {
  opacity: 0;
}

#menu-trigger.clicked div:nth-child(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 12px;
}

#menu-trigger.clicked div:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -12px;
}

#menu-trigger.clicked:hover {
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
}

#menu-trigger.clicked:hover div {
  width: 40px !important;
}

.menu {
  position: fixed;
  top: 0px;
  right: -50%;
  width: 24%;
  height: 100vh;
  z-index: 98;
  background: #322f2b;
  -webkit-transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
  transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
}

.menu.open {
  right: 0;
  -webkit-box-shadow: 1px 0px 5px #222;
  box-shadow: 1px 0px 5px #222;
}

.menu-tint {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3A539B;
  opacity: 0;
  z-index: -1;
  -webkit-transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
  transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
}

.menu-tint.open {
  opacity: 0.15;
  z-index: 97;
}

a.menu-item {
  text-transform: uppercase;
  margin-bottom: 3px;
  display: block;
  text-align: center;
}

.dropdown a {
  text-align: center;
}

2 个答案:

答案 0 :(得分：1)

使用此代码。如果您点击侧边栏之外的任何位置，它将隐藏：

$(function() {
    // define a click listener on whole document
    $(document).on('click', function(e) {
        // check the clicked element id
        if (e.target.id === 'menu-type') {
            // nothing to do ...
        } else {
            $('#menu-type').hide(); // you can replace your own codes here
        }

    })
});​

<强>更新

完整代码

＆＃13;
＆＃13; 
$(document).ready(function() {
  // define a click listener on whole document
  $(document).on("click", function(e) {
    // check the clicked element id
    if (e.target.id == "menu-trigger" || $(e.target).parents('#menu-trigger').length) {
      $("#menu-trigger").toggleClass("clicked");
      $(".container").toggleClass("push");
      $(".menu-type").toggleClass("open");
    } else if (!$(e.target).parents('#menu').length) {
      $("#menu-trigger").removeClass("clicked");
      $(".container").removeClass("push");
      $(".menu-type").removeClass("open");
    }
  });
});
＆＃13; 
#menu-trigger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  border-color: #2957a4;
  padding: 10px;
}

#menu-trigger div {
  position: relative;
  display: block;
  height: 5px;
  margin-bottom: 7px;
  width: 40px;
  background: #fff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: 1px 1px 2px #222;
  box-shadow: 1px 1px 2px #222;
}

#menu-trigger:hover {
  cursor: pointer;
  background: #2957a4;
  color: #fff;
  border-color: #2957a4;
  padding: 10px;
}

#menu-trigger:hover div:nth-child(odd) {
  width: 35px;
}

#menu-trigger:hover div:nth-child(even) {
  width: 25px;
}

#menu-trigger.clicked div:nth-child(even) {
  opacity: 0;
}

#menu-trigger.clicked div:nth-child(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 12px;
}

#menu-trigger.clicked div:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -12px;
}

#menu-trigger.clicked:hover {
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
}

#menu-trigger.clicked:hover div {
  width: 40px !important;
}

.menu {
  position: fixed;
  top: 0px;
  right: -50%;
  width: 24%;
  height: 100vh;
  z-index: 98;
  background: #322f2b;
  -webkit-transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
  transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
}

.menu.open {
  right: 0;
  -webkit-box-shadow: 1px 0px 5px #222;
  box-shadow: 1px 0px 5px #222;
}

.menu-tint {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3A539B;
  opacity: 0;
  z-index: -1;
  -webkit-transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
  transition: all 0.75s cubic-bezier(.77, .06, .28, .85);
}

.menu-tint.open {
  opacity: 0.15;
  z-index: 97;
}

a.menu-item {
  text-transform: uppercase;
  margin-bottom: 3px;
  display: block;
  text-align: center;
}

.dropdown a {
  text-align: center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-trigger" class="menu-trigger">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="menu-tint menu-trigger menu-type"></div>
<div class="menu menu-type" id="menu">
  <div class="table">
    <div class="cell">
      <ul class="cd-navigation">

        <li class="current"><a href="#index-link">MENU</a></li>
        <li><a class="a-white" href="index.php"> Home </a></li>
        <li><a href="#our_jurney" class="scroll-down smooth-scroll">Our Journey</a></li>
        <li class="item-has-children">

          <a href="#0">About Us</a>

          <ul class="sub-menu">

            <li><a href="ethos.php">Company Ethos</a></li>

            <li><a href="joint_venture.php">Joint Ventures</a></li>

          </ul>

        </li>
        <!-- item-has-children -->

        <li class="item-has-children">

          <a href="#0">3 PL Solutions</a>

          <ul class="sub-menu" style="">

            <li><a href="distribution.php"> Distribution Centers</a></li>

            <li><a href="invetory.php">Inventory Management </a></li>

            <li><a href="threepl.php">Customs Clearance </a></li>

            <li><a href="transportation.php">Transportation – MTCL</a></li>

            <li><a href="cold_chain.php">Cold Chain Management</a></li>

            <li><a href="it_management.php">IT- Multiline Business Solution </a></li>
            <li><a href="ar_management.php">AR Management</a></li>

          </ul>

        </li>
        <!-- item-has-children -->

        <li><a class="a-white" href="groupcompanies.php">Group Companies</a></li>



        <li><a href="#our_jurney1" class="scroll-down smooth-scroll">Case Studies</a></li>

        <li><a href="#our_jurney3" class="scroll-down smooth-scroll">Careers</a></li>
        <li><a href="#our_jurneyvalue" class="scroll-down smooth-scroll">Value Added Services</a></li>
        <li><a href="#our_jurney4" class="scroll-down smooth-scroll">What Makes Us Different</a></li>
        <li><a href="#our_jurney5" class="scroll-down smooth-scroll">Locations</a></li>
        <li><a href="gallery.php">Gallery</a></li>
        <li><a class="a-white" href="contact.php">Contact Us</a></li>
        <!-- item-has-children -->
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用以下代码

 $(document).click(function (event) {
                if($('.cd-navigation').has(event.target).length == 0 && !$('.cd-navigation').is(event.target){
                    $('.cd-navigation').removeClass('active');
                }else {
                    $('.cd-navigation').addClass('active');
                }
        });
相关问题
最新问题