Javascript 如何将鼠标悬停替换为单击

我有一个全宽菜单，目前在悬停上工作。我想要完全相同的功能，但只需单击鼠标，而不是鼠标悬停。我只想使用一些jQuery或JavaScript来实现这个功能

这是密码

HTML

如果你想看到这一点，这里是链接。

---

替换以下CSS规则

nav ul li:hover > ul {
  display:block;
}

与

现在，您可以点击菜单项并删除/添加

expanded

CSS类来展开该项：

function handle(){
    $("nav ul li").on("click", function(e) {
            e.stopPropagation();
        var parent = $(this).parent("li");
        if (parent.length)
            $(this).parent().siblings().removeClass("expanded");
        else
            $(this).siblings().removeClass("expanded");
        $(this).addClass("expanded")
  });
}

请参阅更新的。

您可以组合

children（）

和

toggle（）

如下：

$('ul>li').on('click',function(e){
  e.stopPropagation();

  $(this).children('ul').toggle();
})

确保添加

e.stopPropagation（）

以阻止事件冒泡

希望这有帮助

将您的

：悬停
样式替换为
.expanded

将

扩展的

类添加到包含可扩展的

元素的

元素中

另外，将

close expanded

添加到不可展开的菜单项中，这样单击它们将关闭上次单击的展开元素

在jQuery中，将class

expanded

添加到单击的

expandable

元素中

在jQuery中，单击

关闭可展开

时，从每个

可展开

元素中删除类

已展开

$（.expandable”）。在（“单击”）上，函数（事件）{
$（.expanded”）.removeClass（“expanded”）；
$（此）.addClass（“扩展”）；
});
$（“.close expanded”）。在（“单击”）上，函数（事件）{
$（.expanded”）.removeClass（“expanded”）；
});
nav{
文本对齐：居中；
宽度：100%；
背景：贝贝；
填充：0；
保证金：0；
高度：60px；
位置：相对位置；
}
导航ul{
背景：贝贝；
列表样式：无；
填充：0 20px；
保证金：0；
高度：60px；
}
李国荣{
显示：内联块；
}
海军ulli a{
颜色：#333333；
显示：块；
填充：0px 40px；
文字装饰：无；
浮动：左；
高度：60px；
线高：60px；
}
nav ul li.expanded{/*替换：用.expanded悬停*/
背景:#333333；
}
nav ul li.expanded>a{/*替换：用.expanded悬停*/
颜色：#FFFFFF；
}
nav ul li.expanded>ul{/*替换：用.expanded悬停*/
显示：块；
}
导航ul{
背景：贝贝；
填充：0；
文本对齐：居中；
显示：无；
宽度：100%；
位置：绝对位置；
顶部：60px；
左：0px；
}























以下是您的解决方案：

我已经为您的JSFIDLE提供了更新的代码。请看一看

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}
nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}
/*nav ul li:hover {
  background: #333333;
}
nav ul li:hover > a{
    color:#FFFFFF;
}
nav ul li:hover > ul {
  display:block;
}*/
nav ul ul {
  background: #BEBEBE;
  padding:0;
  text-align: center;
  display:none;
    width: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
}

$(document).ready(function(){
    $('li').on('click',function(){
        $(this).siblings('li').not(this).find('a').css('color','#333333');
        $(this).siblings('li').not(this).find('ul').css('display','none');
        $(this).siblings('li').not(this).css('background','#BEBEBE');
        $(this).find('a').css('color','#FFFFFF');
        $(this).find('ul').css('display','block');
        $(this).css('background','#333333');
    });
});
























导航{
文本对齐：居中；
宽度：100%；
背景：贝贝；
填充：0；
保证金：0；
高度：60px；
位置：相对位置；
}
导航ul{
背景：贝贝；
列表样式：无；
填充：0 20px；
保证金：0；
高度：60px；
}
李国荣{
显示：内联块；
}
海军ulli a{
颜色：#333333；
显示：块；
填充：0px 40px；
文字装饰：无；
浮动：左；
高度：60px；
线高：60px；
}
/*nav ul li:悬停{
背景:#333333；
}
导航ulli：悬停>a{
颜色：#FFFFFF；
}
导航ul li：悬停>ul{
显示：块；
}*/
导航ul{
背景：贝贝；
填充：0；
文本对齐：居中；
显示：无；
宽度：100%；
位置：绝对位置；
顶部：60px；
左：0px；
}
$（文档）.ready（函数（）{
$（'li'）。在（'click'，function（）上{
$（this）.兄弟姐妹（'li'）。而不是（this）.查找（'a'）.css（'color'，'#333333'）；
$（this）.sides（'li'）。not（this）.find（'ul'）.css（'display'，'none'）；
$（this）.sibbins（'li'）。not（this）.css（'background'，'#bebe'）；
$（this.find（'a'）.css（'color'，'#FFFFFF'）；
$（this.find（'ul'）.css（'display'，'block'）；
$（this.css（'background'，'#333'）；
});
});

我检查了这个答案，可能是重复的。对于我来说，这是完全不同的。斯图尔有问题。如果你把它应用到这个链接上，它就不能正常工作。这是什么@user3144924，这不是你的问题代码。兄弟，这是从XML生成的动态菜单，也就是说，我不能添加很多类。我需要用jquery或javascript来完成所有的工作。哦，在这种情况下，如果html代码不在特定的结构中，我们怎么能给出解决方案呢？我为您编辑所有内容。我用了你的逻辑，我们很接近。在这里你们会看到主题，若你们点击主题，它会显示你们的英语和数学，但若你们点击英语，它不会进入英语细节。这里有一个链接来感谢你们，它正在第一个子节点上工作，但不幸的是，它不是子节点上的子节点。如果你点击主题，它会显示英语，但如果我们点击英语，它不会显示英语A和英语B。在这里你可以检查我是否更新了我的答案。查看新的JS代码和fiddle。如果您使用子节点扩展菜单，则会产生问题。
function handle(){
    $("nav ul li").on("click", function(e) {
            e.stopPropagation();
        var parent = $(this).parent("li");
        if (parent.length)
            $(this).parent().siblings().removeClass("expanded");
        else
            $(this).siblings().removeClass("expanded");
        $(this).addClass("expanded")
  });
}

$('ul>li').on('click',function(e){
  e.stopPropagation();

  $(this).children('ul').toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}
nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}
/*nav ul li:hover {
  background: #333333;
}
nav ul li:hover > a{
    color:#FFFFFF;
}
nav ul li:hover > ul {
  display:block;
}*/
nav ul ul {
  background: #BEBEBE;
  padding:0;
  text-align: center;
  display:none;
    width: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
}

$(document).ready(function(){
    $('li').on('click',function(){
        $(this).siblings('li').not(this).find('a').css('color','#333333');
        $(this).siblings('li').not(this).find('ul').css('display','none');
        $(this).siblings('li').not(this).css('background','#BEBEBE');
        $(this).find('a').css('color','#FFFFFF');
        $(this).find('ul').css('display','block');
        $(this).css('background','#333333');
    });
});