从悬停到点击的下拉菜单

Question

如何使用 j-query 将以下子导航菜单从悬停转换为单击？在示例中，我添加了一个活动 class 并使用 j-query 来显示子导航，但是在用户单击它后它会消失。

https://codepen.io/patriciaworth/pen/bGGMBow

我按照此网页上的说明进行操作，但无济于事。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Liive Real Estate</title>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            Liive
        </div>
        <div class="toggle">&#9776;</div>
        <div class="panel">
            <div class="links">
                <ul>
                  <li><a href="">Home</a></li>
                  <li>
                    <a href="">Property</a>
                    <ul>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="">Agents</a>
                    <ul>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                    </ul>
                  </li>
                  <li><a href="">Pages</a></li>
                  <li><a href="">Contact</a></li>
                </ul>
            </div>
            <div class="signup">
                <button>Signup</button>
            </div>
        </div>
    </nav>
</body>
</html>

SCSS

/*reset*/
*
{
    margin: 0;
    padding:0;
    list-style-type: none;
    border: none;
    text-decoration: none;
}
html
{
    width:100%;
    min-width: 320px;
    max-width: 1920px;
    margin: 0 auto;
    background: #ccc;
}

//colors
$purple: #a491d3;
$blue-grey: #818aa3;
$light-green:#c5dca0;
$cream: #f5f2b8;

//fonts
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
$heading-font: 'Poppins', sans-serif;
$page-font: 'Roboto', sans-serif;

//breakpoints
$tiny: 576px;
$small: 768px;
$medium: 992px;
$large: 1200px;

.panel
{
    display: block;
}

.navbar
{
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: $heading-font;
    padding:  0 20px;

    @media screen and (max-width: $medium)
    {
        display: block;
        padding: 0;
    }
    .logo
    {
        flex:1;
        text-align: left;
        font-size: 22px;
        color: $purple;
        font-weight: 500;

        @media screen and (max-width: $medium)
        {
            display: block;
            border-bottom: 1px solid $purple;
            text-align: left;
            padding: 20px;
        }
    }
    .toggle
    {
        display: none;

        @media screen and (max-width: $medium)
        {
            display: block;
            position: absolute;
            top: 20px;
            right:20px;
            font-family: $heading-font;
            color: #000;
            font-size: 18px;
            cursor: pointer;
        }
    }
    .panel
    {
        flex: 7;
        display: flex;
        align-items: center;
        justify-content: center;

        @media screen and (max-width: $medium)
        {
            display: none;
        }

        .links
        {
            flex:6;
            text-align: center;
            font-size: 16px;
            line-height: 25px;
        }
    }

    ul 
    { 
        display: block;
        width: 100%; 

        @media screen and (max-width: $medium)
        {
            padding: 20px 0;
        }
    }
    li 
    {
        display: inline-block;
        @media screen and (max-width: $medium)
        {
            display: block;
        }
    }
    ul li a
    {
        transition: 0.5s;
        color: #000;
        padding: 20px 10px;
        display: block;
    text-decoration: none;

        @media screen and (max-width: $medium)
        {
            padding:5px 0;
        }
    }
    ul li a:hover
    {
        background: $purple;
        color: #fff;
    }
    ul li ul
    {
        width: 200px;
        padding: 10px 20px;
        box-sizing: border-box;
        background: #333;
        display: none;
        position: absolute;
        top: 65px;

        @media screen and (max-width: $medium)
        {
            position: relative;
            top:0;
            width: 100%;
        }
    }
    ul li ul li
    {
        display: block;
        text-align: left;
        @media screen and (max-width: $medium)
        {
            text-align: center;
        }
        a
        {
            font-size: 14px;
            padding: 0;
            color: #fff;
            background: transparent !important;
            &:hover
            {
                color: $purple;
                background: transparent !important;
            }
        }
    }

    ul li:hover ul
    {
        display: block;
    }
    ul li:hover a
    {
        background: $purple;
        color: #fff;
    }

  /*THIS DOES NOT WORK*/
    /*.active
    {
        display: block !important;
        a
        {
            background: $purple;
            color: #fff;
        }
    }*/

    .signup
    {
        flex:1;
        text-align: right;

        button
        {
            border: 1px solid $purple;
            padding: 10px 15px;
            background: transparent;
            font-size: 16px;
            transition: 0.5s;
            cursor: pointer;

            &:hover
            {
                background: $purple;
                color: #fff;
            }
        }

        @media screen and (max-width: $medium)
        {
            text-align: center;
            padding-bottom: 20px;
            display: block;
        }

    }

}

JS

$(document).ready(function(){
        $(".toggle").click(function(){
            $("nav .panel").slideToggle();
        });
        /*THIS DOES NOT WORK*/
        /*$("nav").on("click", "li", function(){
            $(this).children("ul").toggleClass("active");
            $("nav li").not(this).children("ul").removeClass("active");
        });*/
    });

Answer 1

您可以搜索 <a> 标签旁边的直系兄弟元素，即 <ul>:

$('a+ul').click()

或搜索所有项目你可以再深一点：

$('a+ul>li').click()

+ 直接的 sibilin

>全部children

Answer 2

你可以直接把hoverclass转换成activeclass，然后点击，切换激活class。找到下面的代码片段并全屏查看，这样它就不会受到 media-queries 的影响。

此外，您需要包含 href="#" 否则它会重新加载页面。

ul li.active ul {
  display: block;
}

ul li.active a {
  background: $purple;
  color: #fff;
}

$(document).ready(function() {

  $(".toggle").click(function() {
    $("nav .panel").slideToggle();
  });

  $("nav").on("click", "li", function() {
    $('nav li.active').not(this).removeClass("active"); // remove previous selection
    $(this).toggleClass("active");
  });
});

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/*reset*/

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: none;
  text-decoration: none;
}

html {
  width: 100%;
  min-width: 320px;
  max-width: 1920px;
  margin: 0 auto;
  background: #ccc;
}

.panel {
  display: block;
}

.navbar {
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  padding: 0 20px;
  /*THIS DOES NOT WORK*/
  /*.active {
   display: block !important;
   a {
    background: $purple;
    color: #fff;
  }
 }
 */
}

@media screen and (max-width: 992px) {
  .navbar {
    display: block;
    padding: 0;
  }
}

.navbar .logo {
  flex: 1;
  text-align: left;
  font-size: 22px;
  color: #a491d3;
  font-weight: 500;
}

@media screen and (max-width: 992px) {
  .navbar .logo {
    display: block;
    border-bottom: 1px solid #a491d3;
    text-align: left;
    padding: 20px;
  }
}

.navbar .toggle {
  display: none;
}

@media screen and (max-width: 992px) {
  .navbar .toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Poppins', sans-serif;
    color: #000;
    font-size: 18px;
    cursor: pointer;
  }
}

.navbar .panel {
  flex: 7;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .navbar .panel {
    display: none;
  }
}

.navbar .panel .links {
  flex: 6;
  text-align: center;
  font-size: 16px;
  line-height: 25px;
}

.navbar ul {
  display: block;
  width: 100%;
}

@media screen and (max-width: 992px) {
  .navbar ul {
    padding: 20px 0;
  }
}

.navbar li {
  display: inline-block;
}

@media screen and (max-width: 992px) {
  .navbar li {
    display: block;
  }
}

.navbar ul li a {
  transition: 0.5s;
  color: #000;
  padding: 20px 10px;
  display: block;
  text-decoration: none;
}

@media screen and (max-width: 992px) {
  .navbar ul li a {
    padding: 5px 0;
  }
}

.navbar ul li a:hover {
  background: #a491d3;
  color: #fff;
}

.navbar ul li ul {
  width: 200px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #333;
  display: none;
  position: absolute;
  top: 65px;
}

@media screen and (max-width: 992px) {
  .navbar ul li ul {
    position: relative;
    top: 0;
    width: 100%;
  }
}

.navbar ul li ul li {
  display: block;
  text-align: left;
}

@media screen and (max-width: 992px) {
  .navbar ul li ul li {
    text-align: center;
  }
}

.navbar ul li ul li a {
  font-size: 14px;
  padding: 0;
  color: #fff;
  background: transparent !important;
}

.navbar ul li ul li a:hover {
  color: #a491d3;
  background: transparent !important;
}

.navbar ul li.active ul {
  display: block;
}

.navbar ul li.active a {
  background: #a491d3;
  color: #fff;
}

.navbar .signup {
  flex: 1;
  text-align: right;
}

.navbar .signup button {
  border: 1px solid #a491d3;
  padding: 10px 15px;
  background: transparent;
  font-size: 16px;
  transition: 0.5s;
  cursor: pointer;
}

.navbar .signup button:hover {
  background: #a491d3;
  color: #fff;
}

@media screen and (max-width: 992px) {
  .navbar .signup {
    text-align: center;
    padding-bottom: 20px;
    display: block;
  }
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar">
  <div class="logo">
    Liive
  </div>
  <div class="toggle">&#9776;</div>
  <div class="panel">
    <div class="links">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Property</a>
          <ul>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Agents</a>
          <ul>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
          </ul>
        </li>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="signup">
      <button>Signup</button>
    </div>
  </div>
</nav>

从悬停到点击的下拉菜单

Dropdown menu from hover to onclick

javascript

jquery

html

css

jquery-mobile-navbar