从悬停到onclick的下拉菜单

时间：2019-11-07 02:12:34

标签： javascript jquery html css jquery-mobile-navbar

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

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

我没有按照该网页上的说明进行操作。

how to change dropdown menu from hover to onclick

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");
        });*/
    });

2 个答案:

答案 0 :(得分：0)

您可以将hover类直接转换为active类，然后单击以切换活动的类。找到以下代码段并全屏查看，以使其不受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>

答案 1 :(得分：-1)

您可以在<a>标签<ul>旁边搜索像直系兄弟姐妹之类的元素：

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

或搜索所有项目  您可以再深入一遍：

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

+立即西比林

>所有孩子

相关问题
最新问题