单击任何其他按钮时，移动导航栏下拉菜单不会向上滑动

【问题标题】：Mobile navigation bar dropdown does not slide up when any other button is clicked单击任何其他按钮时，移动导航栏下拉菜单不会向上滑动
【发布时间】：2017-10-25 20:27:06
【问题描述】：

单击任何其他按钮时，我的导航栏下拉菜单不会关闭，尽管我已经设置了所需的 jquery 代码。我希望下拉菜单在按下任何其他 sup 按钮（蓝色按钮）时向上滑动，而不仅仅是通过单击它自己的 sup 按钮。

$(document).ready(function() {
  var scrollTop = 0;
  $(window).scroll(function() {
    scrollTop = $(window).scrollTop();
    $('.counter').html(scrollTop);
    if (jQuery(window).width() > 936) {
      if (scrollTop >= 100) {
        $('.navbar').addClass('scrolled-nav');
        $('.navbar_menu a').addClass('scrolled-nav');
        $('#logo').stop().animate({
          'height': '45px'
        }, 500);
      } else if (scrollTop < 100) {
        $('.navbar').removeClass('scrolled-nav');
        $('.navbar_menu a').removeClass('scrolled-nav');
        $('#logo').stop().animate({
          'height': '60px'
        }, 500);
      }
    }
  });

});
if ($(window).width() <= 936) {

};
if ($(window).width() > 936) {
  $('#services').hover(function() {
    $('#services_dropdown').slideDown(200);
  });

  if ($('#services_dropdown').is(':hover')) {
    $('#services_dropdown').mouseleave(function() {
      $('#services_dropdown').slideUp(200);
    })
  } else {
    $('#services_div').mouseleave(function() {
      $('#services_dropdown').slideUp(200);
    })
  }
};

$(document).ready(function() {
  if ($(window).width() <= 936) {
    $('#mini_navbar').click(function() {
      $('.navbar_menu').stop(true, true).slideToggle(200);
    });
    if ($('.navbar_menu_item_dropdown').is(':visible')) {
      $('.navbar_menu_item').click(function() {
        $('.navbar_menu_item_dropdown').stop(true, true).slideUp(200);
      })
    } else {
      $('#services').click(function() {
        $('#spacer').stop(true, true).slideToggle(200);
        $('#services_dropdown').stop(true, true).slideToggle(200);
      });

    }
  };
})
html,
body {
  height: 2000px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #e6e6e6;
}

html {
  font-family: "helvetica neue", sans-serif;
}

body {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1519px;
}

.navbar {
  text-align: right;
  height: 70px;
  line-height: 70px;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 1519px;
  z-index: 102;
  -webkit-transition: height .5s, line-height .5s;
  /* Safari */
  transition: height .5s, line-height .5s;
}

.navbar img {
  float: left;
  height: 60px;
  margin: 5px 0px 0px 15px;
}

.navbar_menu {
  margin: 0 100px 0 0;
}

#navbar_menu_item_cover {
  height: 100%;
  width: auto;
  display: inline-block;
}

.navbar_menu_item {
  float: left;
  text-align: center;
  height: 71px;
  position: relative;
}

.navbar_menu_item ul {
  display: none;
  text-align: center;
  padding: 0;
  position: relative;
  top: -14px;
}

.navbar_menu_item li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFF;
  color: #007790;
}

.navbar_menu_item li:hover {
  background: #007790;
  color: #FFF;
}

.navbar_menu a {
  clear: both;
  text-decoration: none;
  color: #f2f2f2;
  margin: 0 15px;
  font-size: 20px;
  line-height: 50px;
  -webkit-transition: height .5s, font-size .5s;
  /* Safari */
  transition: height .5s, font-size .5s;
}

.navbar_menu a:hover {
  color: #007790;
}

#mini_navbar {
  margin: 35px 40px 0 0;
  font-size: 28px;
  line-height: 0px;
  display: none;
  width: 26px;
  float: right;
  color: #FFF;
}

.scrolled-nav {
  height: 60px !important;
  line-height: 60px !important;
  font-size: 15px !important;
}

.navbar_menu a:hover {}

#section_first {
  width: 100%;
  height: auto;
}

.cycle-slideshow img {
  height: auto;
  display: block;
}

.cycle-slideshow {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  height: auto;
  margin: 0;
  padding: 0;
}

.cycle-pager {
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: 101;
  top: 95%;
}

.cycle-pager span {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid #FFF;
  border-radius: 50%;
  margin: 0 5px;
  text-indent: 100%;
  white-space: nowrap;
  cursor: pointer;
}

.cycle-pager .cycle-pager-active {
  background: #FFF;
}

#toggle {
  display: none;
}

@media only screen and (max-width:936px) {
  #mini_navbar {
    display: block;
    cursor: pointer;
  }
  .navbar_menu_item_cover {
    background: #FFF;
    width: 100%;
  }
  .navbar_menu_item {
    position: relative;
    top: 6px;
    width: 100%;
  }
  .navbar_menu_item li {
    line-height: 50px;
    width: 100%;
  }
  .navbar {
    background: #3581AA;
    position: relative;
  }
  .navbar_menu {
    text-align: center;
    width: 100%;
    display: none;
    clear: both;
  }
  .navbar_menu_item_cover {
    width: 100%;
    text-align: center;
    clear: both;
    margin: 0;
  }
  .navbar_menu_item {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 51px;
  }
  .navbar_menu_item_dropdown {
    position: relative;
    margin-top: 14px;
    display: none;
  }
  .navbar_menu a {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;
    background: #64a9ce;
  }
  .navbar_menu a:hover {
    color: #FFF;
  }
  .cycle-pager {
    display: none;
  }
  #first_slide {
    content: url('../images/slide_7_2.jpg');
  }
  #second_slide {
    content: url('../images/slide_9_2.jpg');
  }
  #third_slide {
    content: url('../images/slide_10_2.jpg');
  }
  #fourth_slide {
    content: url('../images/slide_8_2.jpg');
  }
}

@media only screen and (max-width:320px) {
  #first_slide {
    content: url('../images/slide_7_1.jpg');
  }
  #second_slide {
    content: url('../images/slide_9_1.jpg');
  }
  #third_slide {
    content: url('../images/slide_10_1.jpg');
  }
  #fourth_slide {
    content: url('../images/slide_8_1.jpg');
  }
  .cycle-slideshow {
    width: 320px;
    height: 396px;
  }
}

.clear {
  clear: both;
}

#section_second {
  background: #F8DDA1;
  width: 100%;
  height: 500px;
  margin: 0;
}

#spacer {
  width: 100%;
  height: 724px;
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Sea Güzellik</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
  <header>
    <div class="navbar">
      <img id="logo" src="images/Sea_logo_edited_22.png" alt="Logo">
      <div id="mini_navbar">&#9776;</div>
      <div class="navbar_menu">
        <div id="navbar_menu_item_cover">
          <div class="navbar_menu_item"><a id="home" href="#">Anasayfa</a></div>
          <div class="navbar_menu_item"><a id="about" href="#">Hakkımızda</a></div>
          <div class="navbar_menu_item"><a id="deals" href="#">Kampanyalar</a></div>
          <div id="services_div" class="navbar_menu_item"><a id="services" href="#">Hizmetlerimiz</a>
            <ul class="navbar_menu_item_dropdown" id="services_dropdown">
              <li>asdfasf</li>
              <li>adsfasfd</li>
              <li>asdfasf</li>
              <li>asdfaf</li>
              <li>asdfdaf</li>
              <li>asddffaf</li>
              <li>assdfdfaf</li>
              <li>asdffaf</li>
              <li>assdfaf</li>
              <li>asadfaf</li>
            </ul>
          </div>
          <div id="spacer"></div>
          <div class="navbar_menu_item"><a href="#">İletişim</a></div>
        </div>
      </div>
    </div>
  </header>
  <section id="section_first">
    <ul class="cycle-slideshow" data-cycle-swipe=true data-cycle-swipe-fx=scrollHorz data-cycle-slides="li">
      <span class="cycle-pager"></span>
      <li>
        <a href=""><img id="first_slide" src="images/slide_7.jpg" alt=""></a>
      </li>
      <li>
        <a href=""><img id="second_slide" src="images/slide_9.jpg" alt=""></a>
      </li>
      <li>
        <a href=""><img id="third_slide" src="images/slide_10.jpg" alt=""></a>
      </li>
      <li>
        <a href=""><img id="fourth_slide" src="images/slide_8.jpg" alt=""></a>
      </li>
    </ul>
  </section>
  <section id="section_second">

  </section>
  <div class="clear"></div>
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
  <script type="text/javascript" src="js/jquery.cycle2.swipe.min.js"></script>

</body>

</html>

单击任何其他按钮时，我的导航栏下拉菜单不会关闭，尽管我已经设置了所需的 jquery 代码。我希望下拉菜单在按下任何其他 sup 按钮（蓝色按钮）时向上滑动，而不仅仅是通过单击它自己的 sup 按钮。

【问题讨论】：

    标签： jquery html css mobile navigationbar


    【解决方案1】： 

    $(document).ready(function() {
  var scrollTop = 0;
  $(window).scroll(function() {
    scrollTop = $(window).scrollTop();
    $('.counter').html(scrollTop);
    if (jQuery(window).width() > 936) {
      if (scrollTop >= 100) {
        $('.navbar').addClass('scrolled-nav');
        $('.navbar_menu a').addClass('scrolled-nav');
        $('#logo').stop().animate({
          'height': '45px'
        }, 500);
      } else if (scrollTop < 100) {
        $('.navbar').removeClass('scrolled-nav');
        $('.navbar_menu a').removeClass('scrolled-nav');
        $('#logo').stop().animate({
          'height': '60px'
        }, 500);
      }
    }
  });

});
if ($(window).width() <= 936) {

};
if ($(window).width() > 936) {
  $('#services').hover(function() {
    $('#services_dropdown').slideDown(200);
  });

  if ($('#services_dropdown').is(':hover')) {
    $('#services_dropdown').mouseleave(function() {
      $('#services_dropdown').slideUp(200);
    })
  } else {
    $('#services_div').mouseleave(function() {
      $('#services_dropdown').slideUp(200);
    })
  }
};

$(document).ready(function() {
  if ($(window).width() <= 936) {
    $('#mini_navbar').click(function() {
      $('.navbar_menu').stop(true, true).slideToggle(200);
    });
    $(".navbar_menu_item").not("#services_div").click(function() {
      $('.navbar_menu_item_dropdown').slideUp(200);
      $('#spacer').slideUp(200);
    });
    if ($('.navbar_menu_item_dropdown').is(':visible')) {
      $('.navbar_menu_item').click(function() {
        $('.navbar_menu_item_dropdown').stop(true, true).slideUp(200);
      })
      
    } else {
      $('#services').click(function() {
        $('#spacer').stop(true, true).slideToggle(200);
        $('#services_dropdown').stop(true, true).slideToggle(200);
      });

    }
  };
})
    html,
body {
  height: 2000px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #e6e6e6;
}

html {
  font-family: "helvetica neue", sans-serif;
}

body {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1519px;
}

.navbar {
  text-align: right;
  height: 70px;
  line-height: 70px;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 1519px;
  z-index: 102;
  -webkit-transition: height .5s, line-height .5s;
  /* Safari */
  transition: height .5s, line-height .5s;
}

.navbar img {
  float: left;
  height: 60px;
  margin: 5px 0px 0px 15px;
}

.navbar_menu {
  margin: 0 100px 0 0;
}

#navbar_menu_item_cover {
  height: 100%;
  width: auto;
  display: inline-block;
}

.navbar_menu_item {
  float: left;
  text-align: center;
  height: 71px;
  position: relative;
}

.navbar_menu_item ul {
  display: none;
  text-align: center;
  padding: 0;
  position: relative;
  top: -14px;
}

.navbar_menu_item li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFF;
  color: #007790;
}

.navbar_menu_item li:hover {
  background: #007790;
  color: #FFF;
}

.navbar_menu a {
  clear: both;
  text-decoration: none;
  color: #f2f2f2;
  margin: 0 15px;
  font-size: 20px;
  line-height: 50px;
  -webkit-transition: height .5s, font-size .5s;
  /* Safari */
  transition: height .5s, font-size .5s;
}

.navbar_menu a:hover {
  color: #007790;
}

#mini_navbar {
  margin: 35px 40px 0 0;
  font-size: 28px;
  line-height: 0px;
  display: none;
  width: 26px;
  float: right;
  color: #FFF;
}

.scrolled-nav {
  height: 60px !important;
  line-height: 60px !important;
  font-size: 15px !important;
}

.navbar_menu a:hover {}

#section_first {
  width: 100%;
  height: auto;
}

.cycle-slideshow img {
  height: auto;
  display: block;
}

.cycle-slideshow {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  height: auto;
  margin: 0;
  padding: 0;
}

.cycle-pager {
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: 101;
  top: 95%;
}

.cycle-pager span {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid #FFF;
  border-radius: 50%;
  margin: 0 5px;
  text-indent: 100%;
  white-space: nowrap;
  cursor: pointer;
}

.cycle-pager .cycle-pager-active {
  background: #FFF;
}

#toggle {
  display: none;
}

@media only screen and (max-width:936px) {
  #mini_navbar {
    display: block;
    cursor: pointer;
  }
  .navbar_menu_item_cover {
    background: #FFF;
    width: 100%;
  }
  .navbar_menu_item {
    position: relative;
    top: 6px;
    width: 100%;
  }
  .navbar_menu_item li {
    line-height: 50px;
    width: 100%;
  }
  .navbar {
    background: #3581AA;
    position: relative;
  }
  .navbar_menu {
    text-align: center;
    width: 100%;
    display: none;
    clear: both;
  }
  .navbar_menu_item_cover {
    width: 100%;
    text-align: center;
    clear: both;
    margin: 0;
  }
  .navbar_menu_item {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 51px;
  }
  .navbar_menu_item_dropdown {
    position: relative;
    margin-top: 14px;
    display: none;
  }
  .navbar_menu a {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;
    background: #64a9ce;
  }
  .navbar_menu a:hover {
    color: #FFF;
  }
  .cycle-pager {
    display: none;
  }
  #first_slide {
    content: url('../images/slide_7_2.jpg');
  }
  #second_slide {
    content: url('../images/slide_9_2.jpg');
  }
  #third_slide {
    content: url('../images/slide_10_2.jpg');
  }
  #fourth_slide {
    content: url('../images/slide_8_2.jpg');
  }
}

@media only screen and (max-width:320px) {
  #first_slide {
    content: url('../images/slide_7_1.jpg');
  }
  #second_slide {
    content: url('../images/slide_9_1.jpg');
  }
  #third_slide {
    content: url('../images/slide_10_1.jpg');
  }
  #fourth_slide {
    content: url('../images/slide_8_1.jpg');
  }
  .cycle-slideshow {
    width: 320px;
    height: 396px;
  }
}

.clear {
  clear: both;
}

#section_second {
  background: #F8DDA1;
  width: 100%;
  height: 500px;
  margin: 0;
}

#spacer {
  width: 100%;
  height: 724px;
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Sea Güzellik</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
  <header>
    <div class="navbar">
      <img id="logo" src="images/Sea_logo_edited_22.png" alt="Logo">
      <div id="mini_navbar">&#9776;</div>
      <div class="navbar_menu">
        <div id="navbar_menu_item_cover">
          <div class="navbar_menu_item"><a id="home" href="#">Anasayfa</a></div>
          <div class="navbar_menu_item"><a id="about" href="#">Hakkımızda</a></div>
          <div class="navbar_menu_item"><a id="deals" href="#">Kampanyalar</a></div>
          <div id="services_div" class="navbar_menu_item"><a id="services" href="#">Hizmetlerimiz</a>
            <ul class="navbar_menu_item_dropdown" id="services_dropdown">
              <li>asdfasf</li>
              <li>adsfasfd</li>
              <li>asdfasf</li>
              <li>asdfaf</li>
              <li>asdfdaf</li>
              <li>asddffaf</li>
              <li>assdfdfaf</li>
              <li>asdffaf</li>
              <li>assdfaf</li>
              <li>asadfaf</li>
            </ul>
          </div>
          <div id="spacer"></div>
          <div class="navbar_menu_item"><a href="#">İletişim</a></div>
        </div>
      </div>
    </div>
  </header>
  <section id="section_first">
    <ul class="cycle-slideshow" data-cycle-swipe=true data-cycle-swipe-fx=scrollHorz data-cycle-slides="li">
      <span class="cycle-pager"></span>
      <li>
        <a href=""><img id="first_slide" src="images/slide_7.jpg" alt=""></a>
      </li>
      <li>
        <a href=""><img id="second_slide" src="images/slide_9.jpg" alt=""></a>
      </li>
      <li>
        <a href=""><img id="third_slide" src="images/slide_10.jpg" alt=""></a>
      </li>
      <li>
        <a href=""><img id="fourth_slide" src="images/slide_8.jpg" alt=""></a>
      </li>
    </ul>
  </section>
  <section id="section_second">

  </section>
  <div class="clear"></div>
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
  <script type="text/javascript" src="js/jquery.cycle2.swipe.min.js"></script>

</body>

</html>

    试试这个代码 sn-p。它正在工作。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2021-08-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-03
      • 2015-12-30
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode