Мигающий экран - меню навигации, реагирующее на jQuery

ProgramBox

Мигающий экран — меню навигации, реагирующее на jQuery

Post author:admin
Запись опубликована:1 февраля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

У меня проблема с jQuery.

Я копирую чей-то код, как показано ниже, и у jquery возникает проблема с тем, что экран обновляется при нажатии на каждый элемент li.

Я не знаю, почему? кто-нибудь может мне помочь? большое спасибо.

введите описание изображения здесь

 $(document).ready(function () {
    $("#rwdbtn-a").click(function () {
        $(".rwd-overlay").fadeToggle(200);
        $(this).toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
    });
    $('.rwd-overlay').on('click', function () {
        $(".rwd-overlay").fadeToggle(200);
        $(".rwd-menu-btn a").toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
    });
    $('.rwd-menu a').on('click', function () {
        $(".rwd-overlay").fadeToggle(200);
        $(".rwd-menu-btn a").toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
    });
});

 /*
Theme Name: CthuKi Responsive Navigation Menu
Author: Maria Zulauf
Version: 1.0
*/
/* ================================================
Base
============================================= */

body {
   height: 100%;
   margin: 0;
   background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/escheresque_ste.png");
   /* Background pattern from subtlepatterns.com */
   background-color: #111;
   color: #fff;
   
}

.wrapper {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   font-family: 'Roboto', sans-serif;
   font-weight: normal;
   text-align: center;
}

.wrapper > * {
   padding: 10px;
   flex: 1 100%;
}
.header {
   background: black;
}
.section-1 {
   background: rgba(0, 0, 0, 0.4);
}
.main {
   background: #fff;
}
.aside-1 {
   background: tomato;
}
.article-1 {
   background: darkturquoise;
}
.article-2 {
   background: wheat;
}
.article-3 {
   background: steelblue
}
.section-2 {
   background: rgba(0, 0, 0, 0.4);
}
.footer {
   background: #222;
}

/* ================================================
Typography
============================================= */
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600|Roboto:400,700';

/* ================================================
Diverses
============================================= */


/* ================================================
Layout
============================================= */
/*HEADER*/

.header {
   height: 31px;
   font-family: 'Raleway', sans-serif;
   font-weight: 500;
}
/*LOGO*/
.menu-logo  {
   z-index: 999;
   position: absolute; 
   display: inline;
   top: 1%;
   left: 60px;
   font-size: 32px;
}

.menu-logo  a {
   display: inline-block;
   text-decoration: none;
   color: #fff;
   -o-transition:color .2s ease-out;
   -ms-transition:color .2s ease-out;
   -moz-transition:color .2s ease-out;
   -webkit-transition:color .2s ease-out;
   transition:color .2s ease-out;
}
.menu-logo  a:hover{
   color: darkturquoise;
}


/*NAV*/
.nav-1  {
   z-index: 999;
   position: absolute; 
   display: inline;
   top: 1.5%;
   right: 60px;
   width:500px;
   font-size: 20px;
  
}
.menu-1 ul {
   display:flex;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%; 
}

.menu-1 li {
   display: inline;
   width:100%;   
   list-style: none;
   text-align: center;
   font-family: 'Raleway', sans-serif;
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.menu-1 li a { 
   width:100%;
   margin: 0 10px;
   color: #fff;
   vertical-align: middle;
   text-decoration: none;
      -o-transition:color .2s ease-out;
   -ms-transition:color .2s ease-out;
   -moz-transition:color .2s ease-out;
   -webkit-transition:color .2s ease-out;
   transition:color .2s ease-out;
}
.menu-1 li a:hover{
  /* border-bottom: 2px solid #fff; */
   color: darkturquoise;
}

.menu-logo  a:active, .menu-1 li a:active{
   color: rgba(0, 206, 209, .9);
}
/*HAMBURGER NAV*/

.rwd-menu a {
   text-decoration: none;
   transition: all 600ms ease-in-out;
}

/* OPEN / CLOSE BTNS */
.rwd-menu-btn {
   z-index: 999;
   position: absolute;
   display: inline;
   top: 7px;
   right: 6%;
   font-size: 32px;
}

.rwd-menu-btn a {
   display: inline-block;
   text-decoration: none;
   /* safari hack */
}

.rwd-btn-open:after {
   content: "f0c9";
   color: #fff;
   font-family: "fontawesome";
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.rwd-btn-open:hover:after {
   color: darkturquoise;
}

.rwd-btn-close:after {
   content: "f00d";
   color: #fff;
   font-family: "fontawesome";
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.rwd-btn-close:hover:after {
   color: darkturquoise;
}

/* OVERLAY */
.rwd-overlay {
   z-index: 99;
   position: fixed;
   display: none;
   overflow: hidden;
   top: 51px;
   right: 0; 
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background: rgba(17,17,17, 0.3);
}

.rwd-menu {
   width: 45%;
   height: 100%;
   float:right;
   background: rgba(17,17,17, 0.6);
}

.rwd-menu ul { 
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%; 
}

.rwd-menu li {
   display: table;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 10%;
   list-style: none;
   text-align: center;
      font-family: 'Raleway', sans-serif;
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.rwd-menu li a {
   display: table-cell;
   color: #fff;
   vertical-align: middle;
   text-decoration: none;
}

.rwd-menu li:hover, .rwd-menu li a:hover {
    color: #fff;
}

/* Sweep To Right */
.rwd-sweep {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.rwd-sweep:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: darkturquoise;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rwd-sweep:hover, .rwd-sweep:focus, .rwd-sweep:active {
  color: #fff;
}
.rwd-sweep:hover:before, .rwd-sweep:focus:before, .rwd-sweep:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* ================================================
Responsive
============================================= */

@media all and (max-width: 800px) {
   .nav-1{
      display:none;
   }
   .nav-rwd{
      visibility: visible;
   } 
  
}

@media all and (min-width: 800px) {
   .nav-rwd{
      visibility: hidden;
  
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
   <section class="wrapper">
      <header class="header">
         <div class="menu-logo">
            <a id="home" class="logo-sm" href="#">CthuKi</a>
         </div>
         <nav class="nav-1">
            <div class="menu-1">
               <ul>
                  <li href="#home"> <a>Home</a></li>
                  <li href="#"><a>Blog</a></li>
                  <li href="#"><a>Portfolio</a></li>
                  <li href="#"><a>About</a></li>
                  <li href="#"><a>Contact</a></li>
               </ul>
            </div>
         </nav>
         <!-- RWD Navigation-->
         <nav class="nav-rwd">
            <div class="rwd-menu-btn">
               <a id="rwdbtn-a" class="rwd-btn-open" href="javascript:void(0)"></a>
            </div>
            <div class="rwd-overlay">
               <div class="rwd-menu">
                  <ul>
                     <li class="rwd-sweep" href="#"><a>Home</a></li>
                     <li class="rwd-sweep" href="#"><a>Blog</a></li>
                     <li class="rwd-sweep" href="#"><a>Portfolio</a></li>
                     <li class="rwd-sweep" href="#"><a>About</a></li>
                     <li class="rwd-sweep" href="#"><a>Contact</a></li>
                  </ul>
               </div>
            </div>
         </nav>

      </header>


   </section>

</body>

Ответ №1:

это из-за кода jquery.

 $('.rwd-menu a').on('click', function () {
        $(".rwd-overlay").fadeToggle(200);
        $(".rwd-menu-btn a").toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
    });

он затуманивает навигационный контейнер после того, как пользователь нажимает на каждый пункт меню, поэтому он исчезает и появляется снова. Это проблема, если вы просто копируете и вставляете код вместо того, чтобы изучать и делать свой собственный. Вы должны узнать, как это работает и как его использовать.

 $(document).ready(function () {
    $("#rwdbtn-a").click(function () {
        $(".rwd-overlay").fadeToggle(200);
        $(this).toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
    });
   
});

 /*
Theme Name: CthuKi Responsive Navigation Menu
Author: Maria Zulauf
Version: 1.0
*/
/* ================================================
Base
============================================= */

body {
   height: 100%;
   margin: 0;
   background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/escheresque_ste.png");
   /* Background pattern from subtlepatterns.com */
   background-color: #111;
   color: #fff;
   
}

.wrapper {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   font-family: 'Roboto', sans-serif;
   font-weight: normal;
   text-align: center;
}

.wrapper > * {
   padding: 10px;
   flex: 1 100%;
}
.header {
   background: black;
}
.section-1 {
   background: rgba(0, 0, 0, 0.4);
}
.main {
   background: #fff;
}
.aside-1 {
   background: tomato;
}
.article-1 {
   background: darkturquoise;
}
.article-2 {
   background: wheat;
}
.article-3 {
   background: steelblue
}
.section-2 {
   background: rgba(0, 0, 0, 0.4);
}
.footer {
   background: #222;
}

/* ================================================
Typography
============================================= */
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600|Roboto:400,700';

/* ================================================
Diverses
============================================= */


/* ================================================
Layout
============================================= */
/*HEADER*/

.header {
   height: 31px;
   font-family: 'Raleway', sans-serif;
   font-weight: 500;
}
/*LOGO*/
.menu-logo  {
   z-index: 999;
   position: absolute; 
   display: inline;
   top: 1%;
   left: 60px;
   font-size: 32px;
}

.menu-logo  a {
   display: inline-block;
   text-decoration: none;
   color: #fff;
   -o-transition:color .2s ease-out;
   -ms-transition:color .2s ease-out;
   -moz-transition:color .2s ease-out;
   -webkit-transition:color .2s ease-out;
   transition:color .2s ease-out;
}
.menu-logo  a:hover{
   color: darkturquoise;
}


/*NAV*/
.nav-1  {
   z-index: 999;
   position: absolute; 
   display: inline;
   top: 1.5%;
   right: 60px;
   width:500px;
   font-size: 20px;
  
}
.menu-1 ul {
   display:flex;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%; 
}

.menu-1 li {
   display: inline;
   width:100%;   
   list-style: none;
   text-align: center;
   font-family: 'Raleway', sans-serif;
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.menu-1 li a { 
   width:100%;
   margin: 0 10px;
   color: #fff;
   vertical-align: middle;
   text-decoration: none;
      -o-transition:color .2s ease-out;
   -ms-transition:color .2s ease-out;
   -moz-transition:color .2s ease-out;
   -webkit-transition:color .2s ease-out;
   transition:color .2s ease-out;
}
.menu-1 li a:hover{
  /* border-bottom: 2px solid #fff; */
   color: darkturquoise;
}

.menu-logo  a:active, .menu-1 li a:active{
   color: rgba(0, 206, 209, .9);
}
/*HAMBURGER NAV*/

.rwd-menu a {
   text-decoration: none;
   transition: all 600ms ease-in-out;
}

/* OPEN / CLOSE BTNS */
.rwd-menu-btn {
   z-index: 999;
   position: absolute;
   display: inline;
   top: 7px;
   right: 6%;
   font-size: 32px;
}

.rwd-menu-btn a {
   display: inline-block;
   text-decoration: none;
   /* safari hack */
}

.rwd-btn-open:after {
   content: "f0c9";
   color: #fff;
   font-family: "fontawesome";
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.rwd-btn-open:hover:after {
   color: darkturquoise;
}

.rwd-btn-close:after {
   content: "f00d";
   color: #fff;
   font-family: "fontawesome";
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.rwd-btn-close:hover:after {
   color: darkturquoise;
}

/* OVERLAY */
.rwd-overlay {
   z-index: 99;
   position: fixed;
   display: none;
   overflow: hidden;
   top: 51px;
   right: 0; 
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background: rgba(17,17,17, 0.3);
}

.rwd-menu {
   width: 45%;
   height: 100%;
   float:right;
   background: rgba(17,17,17, 0.6);
}

.rwd-menu ul { 
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%; 
}

.rwd-menu li {
   display: table;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 10%;
   list-style: none;
   text-align: center;
      font-family: 'Raleway', sans-serif;
   -webkit-transition: all .2s linear 0s;
   -moz-transition: all .2s linear 0s;
   -o-transition: all .2s linear 0s;
   transition-property: all .2s linear 0s;
}

.rwd-menu li a {
   display: table-cell;
   color: #fff;
   vertical-align: middle;
   text-decoration: none;
}

.rwd-menu li:hover, .rwd-menu li a:hover {
    color: #fff;
}

/* Sweep To Right */
.rwd-sweep {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.rwd-sweep:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: darkturquoise;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rwd-sweep:hover, .rwd-sweep:focus, .rwd-sweep:active {
  color: #fff;
}
.rwd-sweep:hover:before, .rwd-sweep:focus:before, .rwd-sweep:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* ================================================
Responsive
============================================= */

@media all and (max-width: 800px) {
   .nav-1{
      display:none;
   }
   .nav-rwd{
      visibility: visible;
   } 
  
}

@media all and (min-width: 800px) {
   .nav-rwd{
      visibility: hidden;
  
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
   <section class="wrapper">
      <header class="header">
         <div class="menu-logo">
            <a id="home" class="logo-sm" href="#">CthuKi</a>
         </div>
         <nav class="nav-1">
            <div class="menu-1">
               <ul>
                  <li href="#home"> <a>Home</a></li>
                  <li href="#"><a>Blog</a></li>
                  <li href="#"><a>Portfolio</a></li>
                  <li href="#"><a>About</a></li>
                  <li href="#"><a>Contact</a></li>
               </ul>
            </div>
         </nav>
         <!-- RWD Navigation-->
         <nav class="nav-rwd">
            <div class="rwd-menu-btn">
               <a id="rwdbtn-a" class="rwd-btn-open" href="javascript:void(0)"></a>
            </div>
            <div class="rwd-overlay">
               <div class="rwd-menu">
                  <ul>
                     <li class="rwd-sweep" href="#"><a>Home</a></li>
                     <li class="rwd-sweep" href="#"><a>Blog</a></li>
                     <li class="rwd-sweep" href="#"><a>Portfolio</a></li>
                     <li class="rwd-sweep" href="#"><a>About</a></li>
                     <li class="rwd-sweep" href="#"><a>Contact</a></li>
                  </ul>
               </div>
            </div>
         </nav>

      </header>


   </section>

</body>

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Что хранится в конечном узле кластеризованного индекса

Как создать счетчик в этом операторе T-SQL, чтобы получить результат в значении INT

Я хочу найти существующий столбец/строку и отредактировать его