Question

当我单击位于625px以下的菜单图标时，宽度> 625的菜单将变为不可单击。当我重新加载页面并单击大屏幕菜单时，移动设备中的菜单按钮将变为不可点击。

jquery代码的编写方式一定有问题。控制台中未显示任何错误。

这是带有子菜单的简单导航。 .dropli是导航中的一个菜单项。 .dropdown是下拉列表。

.menu-icon是锚标记，当单击移动浏览器时，它将打开前向导航

注意： 当我将鼠标悬停在.dropli上时，.menu-icon变得无效。当我重新加载并点击.menu-icon时，.dropli变得无效

$(document).ready(function() {  
    
      $(".dropli>a").on("mouseover", function() {
        $(".dropdown").show();
      });
      $(".dropli").on("mouseleave", function() {
        $(".dropdown").hide();
      });
      if ($(window).width() <= 625) {
        $(".dropli>a").on("mouseover", function() {
          $(".dropdown").show();
        });
        $(".dropli").on("mouseleave", function() {
          $(".dropdown").show();
        });
        $(".dropdown").show();
        // $(".nav").hide();
      } else {
        // $(".nav").show();
      }
    
      
    
      $(window).resize(function() {
        if ($(window).width() <= 625) {
          // $(".nav").hide();
          $(".dropdown").show();
          $(".dropli>a").on("mouseover", function() {
            $(".dropdown").show();
          });
          $(".dropli").on("mouseleave", function() {
            $(".dropdown").show();
          });
        } else {
          $(".dropdown").hide();
          // $(".nav").show();
          $(".dropli>a").on("mouseover", function() {
            $(".dropdown").show();
          });
          $(".dropli").on("mouseleave", function() {
            $(".dropdown").hide();
          });
          $(".dropli").on("click", function() {
            $(".drpodown").toggle();
            console.log('clicked');
          });
        }
        
      });
    
      function zin() {
        $(".nav").css("z-index", "1");
        $("nav").css("z-index", "1");
      }
      function zino() {
        $(".nav").css("z-index", "-1");
        $("nav").css("z-index", "-1");
      }
    
      function dropdown() {
        if ($(window).width() <= 625) {
          // $(".header nav").css("height", "0");
          $(".menu-icon").on("click", function(e) {
            e.preventDefault();
             console.log('clicked');
            if ($("nav").height() < 5) {
              console.log($(".nav").height());
              $("nav").animate({ height: $(".nav").height() + 15 + "px" }, 750);
              // $(".nav").css("z-index", "1");
              // $("nav").css("z-index", "1");
              setTimeout(zin, 750);
            } else {
              $("nav").animate({ height: "0px" }, 750);
              zino();
            }
          });
        } else {
          $("nav").css("height", "auto");
        }
      }
      dropdown();
      $(window).resize(function() {
        if ($(window).width() > 625) {
          $("nav").css("height", "auto");
        } else {
          $("nav").css("height", "0");
        }
        console.log($(window).width());
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header main-container">
          <div class="fb">
            <span class="fb-logo">Follow us on Facebook :</span>
            <img src="img/fb.png">
          </div>
          <a class="menu-icon">
            <i class="fas fa-bars"></i>
          </a>
          <header>
            <div class="logo">
              <a href="index.html">
                <img src="img/logo.png" alt="keep it on logo">
              </a>
            </div>
          </header>
          <nav>
            <ul class="nav">
              <li class="dropli">
                <a>Menu</a>
                <ul class="dropdown">
                  <li>
                    <a href="#section1">Menu</a>
                  </li>
                  <li>
                    <a href="#section2">Menu</a>
                  </li>
                  <li>
                    <a href="#section3">Menu</a>
                  </li>
                  <li>
                    <a href="#section4">Menu</a>
                  </li>
                  <li>
                    <a href="#section5">Menu</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">menu</a>
              </li>
              <li>
                <a href="#">menu</a>
              </li>
              <li>
                <a href="#">menu</a>
              </li>
            </ul>
            <!-- <div class="fb">
              <span class="fb-logo">Follow us on Facebook :</span>
              <img src="img/fb.png">
            </div> -->
          </nav>
        </section>

我尝试了另一种方法，但仍然没有得到答案。

$(document).ready(function() {
      // console.log($(window).width());
      // $(window).resize(function() {
      //   if ($(window).width() > 625) {
      //     $(".nav").show();
      //   } else {
      //     $(".nav").hide();
      //   }
      // });
      // code for dropdown in non mobile browsers
      // $(".dropli>a").on("mouseover", function() {
      //   $(".dropdown").show();
      // });
      // $(".dropli").on("mouseleave", function() {
      //   $(".dropdown").hide();
      // });
      // code for dropdown in mobile browsers
      // if ($(window).width() <= 625) {
      //   $(".dropli>a").on("mouseover", function() {
      //     $(".dropdown").show();
      //   });
      //   $(".dropli>a").on("mouseleave", function() {
      //     $(".dropdown").show();
      //   });
      //   $(".dropdown").show();
      //   // $(".nav").hide();
      // } else {
      //   // $(".nav").show();
      //   $(".dropli>a").on("mouseover", function() {
      //     $(".dropdown").show();
      //   });
      //   $(".dropli>a").on("mouseleave", function() {
      //     $(".dropdown").hide();
      //   });
      // }

      // $(window).resize(function() {
      //   $(".dropli>a").on("mouseover", function() {
      //     $(".dropdown").show();
      //   });
      //   $(".dropli").on("mouseleave", function() {
      //     $(".dropdown").hide();
      //   });
      //   if ($(window).width() <= 625) {
      //     $(".dropli>a").on("mouseover", function() {
      //       $(".dropdown").show();
      //     });
      //     $(".dropli").on("mouseleave", function() {
      //       $(".dropdown").show();
      //     });
      //     $(".dropdown").show();
      //     // $(".nav").hide();
      //   } else {
      //     // $(".nav").show();
      //   }
      // });

      // $(window).resize(function() {
      //   if ($(window).width() <= 625) {
      //     // $(".nav").hide();
      //     $(".dropdown").show();
      //     $(".dropli>a").on("mouseover", function() {
      //       $(".dropdown").show();
      //     });
      //     $(".dropli").on("mouseleave", function() {
      //       $(".dropdown").show();
      //     });
      //   } else {
      //     $(".dropdown").hide();
      //     // $(".nav").show();
      //     $(".dropli>a").on("mouseover", function() {
      //       $(".dropdown").show();
      //     });
      //     $(".dropli").on("mouseleave", function() {
      //       $(".dropdown").hide();
      //     });
      //     $(".dropli").on("click", function() {
      //       $(".drpodown").toggle();
      //       console.log('clicked');
      //     });
      //   }
      //   if ($(window).width() <= 625) {
      //     $(".menu-icon i").on("click", function(e) {
      //       e.preventDefault();

      //       if ($("nav").height() < 5) {
      //         console.log($(".nav").height());
      //         $("nav").animate({ height: $(".nav").height() + 15 + "px" }, 750);
      //       } else {
      //         $("nav").animate({ height: "0px" }, 750);
      //       }
      //     });
      //   }
      // });

      // function zin() {
      //   $(".nav").css("z-index", "1");
      //   $("nav").css("z-index", "1");
      // }
      function zino() {
        // if ($("nav").height() < 508) {
        // console.log("this worked in zion");
        // $(".nav").css("z-index", "-1");
        // $("nav").css("z-index", "-1");
        // }
        setTimeout(function() {
          if ($("nav").height() > 508) {
            $(".nav").css("z-index", "1");
            $("nav").css("z-index", "1");
            // console.log("this is working");
          } else {
            if ($("nav").height() < 508) {
              $(".nav").css("z-index", "-1");
              $("nav").css("z-index", "-1");
              // console.log("this is working fornow");
            }
          }
        }, 850);
      }
      // while ($("nav").height() > 508) {
      //   $(".nav").css("z-index", "1");
      //   $("nav").css("z-index", "1");
      // }
      // code for mobile menu
      function dropdown(a) {
        // $(".header nav").css("height", "0");
        $(".menu-icon i").on("click", function(e) {
          e.preventDefault();
          if ($(window).width() <= 626) {
            if ($("nav").height() < 5) {
              // console.log($(".nav").height());
              $("nav").animate(
                { height: $(".nav").height() + 15 + "px" },
                750,
                zino()
              );
              // $(".nav").css("z-index", "1");
              // $("nav").css("z-index", "1");

              // var currentHeight;
              // setTimeout(function(currentHeight) {
              //   currentHeight = $("nav").height();
              // }, 1000);
              // console.log(currentHeight);
            } else {
              if ($("nav").height() < 508) {
                $(".nav").css("z-index", "-1");
                $("nav").css("z-index", "-1");
                // console.log("this is working fornow from else");
              }
              $("nav").animate({ height: "0px" }, 750);
              // if ($("nav").height() < 508) {
              //   console.log("this is working now")
              //   zino();
              // }
              console.log($("nav").height());

              // if ($("nav").height() < currentHeight) {

              // } else {
              //   console.log("this thing ran");
              // }
            }
            console.log($("nav").height());
          } else {
            $("nav").css("height", "auto");
          }
          $(".nav").css("z-index", "-1");
          $("nav").css("z-index", "-1");
          // console.log("code for mobile menu");
          // console.log(a);
          //  console.log('clicked');
        });

        console.log(a);
      }
      dropdown();
      $(window).resize(function() {
        if ($(window).width() <= 625) {
          // dropdown("ran from resize");
        }
      });

      $(window).resize(function() {
        if ($(window).width() > 625) {
          // console.log("bottom code ran");
          $("nav").css("height", "auto");
        } else {
          $("nav").css("height", "0");
        }
        // console.log($(window).width());
      });
    });

html代码

Answer 1

您的代码中有错字

$(".drpodown").toggle();

在人像模式下单击菜单时无法单击菜单项

1 个答案: