jquery - 如何将下拉菜单从悬停更改为点击

Question

需要将下拉菜单从悬停更改为单击:我附上了CSS和HTML代码我还附上了工作 fiddle https://jsfiddle.net/prabashanash/wafp2bae/

#navContainer {
  margin: 41px 0 0 0px;
  padding: 0;
  background: #424445;
  /* border: 1px solid #7398ba; */
  text-align: center;
  width: 100%;
}

#navContainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainer ul li span:hover {
  /*background: pink;*/
}

#navContainer ul li a:hover {
  background: black;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul ul li a {
  background: #bec8cb;
}

#navContainer ul li:hover ul {
  /*width: 19%;*/
  position: static;
  display: block;
  right: 244px;
  top: 50px;
  float: right;
}

<div id="navContainer">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li>
      <span><a href="#">About </a></span>
      <ul>
        <li><a href="#">Our business</a></li>
        <li><a href="#">Our History </a></li>
      </ul>
    </li>
    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
    <li><span><a href="#">Contact</a></span></li>
    <li><span><a href="#">News</a></span></li>

    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
  </ul>
</div>

如何将下拉列表从悬停更改为鼠标单击不知道如何完成这项工作

附上 fiddle : https://jsfiddle.net/prabashanash/wafp2bae/

<div id="navContainer">
                                    <ul>
                                        <li><span><a href="#">Home</a></span></li>
                                        <li>
                                            <span><a href="#">About </a></span>
                                            <ul>
                                                <li><a href="#">Our business</a></li>
                                                <li><a href="#">Our History </a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <span><a href="#">Services</a></span>
                                            <ul>
                                                <li><a href="#">Web Design</a></li>
                                                <li><a href="#">Web templates </a></li>
                                                <li><a href="#">Tutorials </a></li>
                                            </ul>
                                        </li>
                                        <li><span><a href="#">Contact</a></span></li>
                                        <li><span><a href="#">News</a></span></li>

                                        <li > 
                                            <span><a href="#">Services</a></span>
                                            <ul >
                                                <li><a href="#">Web Design</a></li>
                                                <li><a href="#">Web templates </a></li>
                                                <li><a href="#">Tutorials </a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>

Answer 1

所以让我们把它分开一点。对于初学者，我假设您已经引用了 jquery。

让我们首先将子列表的 :hover 选择器更改为它自己的选择器。

旧 CSS:

#navContainer ul li:hover ul {
        /*width: 19%;*/
        position: static;
        display: block;
        right: 244px;
        top: 50px;
        float: right;   
    }

新的 CSS:

.active {
        /*width: 19%;*/
        position: static !important;
        display: block !important;
        right: 244px;
        top: 50px;
        float: right;
    }

我添加了几个 !important 语句，因为您需要这些语句来覆盖任何其他设置。可能需要将 !important 添加到每个其他的，但不一定需要。

现在我们要制作 JQuery 选择器。在您的 JS 文件中(或在您的 html 文档中的脚本标签内)，我们需要找到元素并将其绑定(bind)事件。我们可以使用 JQuery .on 函数来做到这一点。

首先，我们需要由 ID #navContainer 标识的基础容器。然后我们可以这样绑定(bind)事件:

$("#navContainer").on("click", "li", function(){

});

从那里开始，我们只需在单击时添加或删除类。我们可以使用 toggleClass JQuery 函数来做到这一点。编辑:我们还需要删除任何其他下拉列表中的事件组件，以防多个打开。

$("#navContainer").on("click", "li", function(){ 
   $(this).children("ul").toggleClass("active");
   $("#navContainer li").not(this).children("ul").removeClass("active");
});

这是有效的，因为 .on 绑定(bind)到容器中列表项内的每个无序列表自从我们将 :hover 选择器更改为用于事件类后，它就变成了在单击时简单地打开和关闭类。

希望这对您有所帮助!

编辑:嵌入式代码段

$("#navContainer").on("click", "li", function(){
   $(this).children("ul").toggleClass("active");
   $("#navContainer li").not(this).children("ul").removeClass("active");
});

#navContainer {
  margin: 41px 0 0 0px;
  padding: 0;
  background: #424445;
  /* border: 1px solid #7398ba; */
  text-align: center;
  width: 100%;
}

#navContainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainer ul li span:hover {
  /*background: pink;*/
}

#navContainer ul li a:hover {
  background: black;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul ul li a {
  background: #bec8cb;
}

.active {
        /*width: 19%;*/
        position: static !important;
        display: block !important;
        right: 244px;
        top: 50px;
        float: right;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li>
      <span><a href="#">About </a></span>
      <ul>
        <li><a href="#">Our business</a></li>
        <li><a href="#">Our History </a></li>
      </ul>
    </li>
    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a>
        </li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
    <li><span><a href="#">Contact</a></span></li>
    <li><span><a href="#">News</a></span></li>

    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
  </ul>
</div>