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

时间:2017-10-25 20:27:07

标签: jquery html css mobile navigationbar

单击任何其他按钮时,我的导航栏下拉菜单不会关闭,但我已设置所需的jquery代码。我希望当按下任何其他支持按钮时,下拉菜单会向上滑动(蓝色按钮),而不仅仅是单击它自己的支持按钮。



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

    }
  };
})
&#13;
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;
}
&#13;
<!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>
&#13;
&#13;
&#13;

单击任何其他按钮时,我的导航栏下拉菜单不会关闭,但我已设置所需的jquery代码。我希望当按下任何其他支持按钮时,下拉菜单会向上滑动(蓝色按钮),而不仅仅是单击它自己的支持按钮。

1 个答案:

答案 0 :(得分:0)

$(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>

尝试此代码段。它正在工作。