如何将下拉菜单从悬停更改为onclick

时间：2017-11-30 08:16:04

标签： jquery html css

需要将菜单下拉菜单从悬停更改为onclick： 我已经附加了CSS和HTML代码 我还附上了工作小提琴 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>

如何将下拉菜单从悬停更改为鼠标单击 不知道怎么做到这一点

附上小提琴： 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>

7 个答案:

答案 0 :(得分：2)

所以让我们把它分开一点。对于初学者，我假设你已经引用了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 doc上的脚本标记内），我们需要找到元素并将绑定事件添加到它们中。 我们可以通过使用JQuery .on函数来实现。

首先，我们需要由id #navContainer标识的基本容器。然后我们可以这样绑定事件：

$("#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绑定是容器中列表项内的每个无序列表因为我们将：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>

答案 1 :(得分：1)

使用几行jquery可以实现它：

＆＃13;
＆＃13; 
$(document).ready(function(){
    $("#navContainer ul li a").click(function(){
    	$("#navContainer ul li a").not(this).removeClass("activeA")
        $(this).toggleClass("activeA")
    });
    $("#navContainer ul li").click(function(){
        var current = $(this).children("ul")
    	$("ul li ul.activeUl").not(current).removeClass("activeUl")
        current.toggleClass("activeUl")
    });
});
＆＃13; 
#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.activeA {
    background: black;
}
#navContainer ul ul {
    position: absolute;
    display: none;
}
#navContainer ul ul li a {
    background: #bec8cb;
}
#navContainer ul li ul.activeUl {
    /*width: 19%;*/
    
    position: static;
    display: block;
    right: 244px;
    top: 50px;
    float: right;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我认为你需要这个。

$( "#navContainer ul li" ).click(function() {
  $(this).siblings().removeClass('open');
  $( this ).toggleClass("open")
});
#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.open ul {
    position: inherit;
    display: block;
    right: 0px;
    top: 50px;
    z-index: 121;
    float: right;
    top: 0;
}
<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>

答案 3 :(得分：0)

您可以使用toggleClass轻松使用 jQuery ，您将添加

$( "#navContainer ul li" ).click(function() {
  $( this ).toggleClass("open")
});

然后将:hover更改为.open（或将“.open”更改为您想要的任何内容）

#navContainer ul li.open ul {
    position: static;
    display: block;
    right: 244px;
    top: 50px;
    float: right;
}

现在onclick将切换课程.open，因此它会为您提供相同的结果，但onclick代替onhover。

请参阅更新后的JSfiddle。

注意

确保在<head>。

中添加 jQuery 引用

示例 

<head>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>

答案 4 :(得分：0)

您需要使用jquery click事件而不是在css中使用hover。删除悬停的CSS代码，然后通过jquery在ul的click事件上应用css。 添加jquery代码： - 

$('#navContainer').on('click','ul li',function(){
            $(this).siblings().find('ul').css('display','none');
            $(this).find('ul').css({"position": "static",
            "display": "block",
            "right": "244px",
            "top": "50px",
            "float": "right"});
        });

并删除此css代码： - 

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

您可以查看更新的code here

答案 5 :(得分：0)

#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;
}
#navContainer ul li ul {
  width: 100%;
}
<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>

答案 6 :(得分：-1)

您可以尝试将悬停css属性分配给class和onclick，以提供或接受来自class <li> >

相关问题
最新问题