Question

我有一个全宽度菜单，目前可用于悬停。我想要完全相同的功能，但点击不鼠标悬停。我只想使用一些jQuery或JavaScript来实现这个功能。

这是代码

HTML

<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>

CSS

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;
}

如果你想在这里看到这个是链接。 Please click here to see the menu in action

Answer 1

替换以下CSS规则

<?php $form = ActiveForm::begin(); ?>
...
<?php ActiveForm::end(); ?>

与

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

现在，您可以处理菜单项上的点击并删除/添加nav ul li.expanded > ul { display:block; } CSS类以展开项目：

expanded

请参阅更新后的fiddle。

Answer 2

将:hover样式替换为.expanded，
将expanded课程添加到包含可扩展 <li>

<ul>

此外，将close-expanded添加到不可展开的菜单项中，因此单击它们将关闭最后一次单击的展开元素。
在您的jQuery中，将类expanded添加到点击的expandable元素。
在您的jQuery中，在点击expanded时，从每个expandable元素中删除类close-expandable。

＆＃13;

$(".expandable").on("click", function(event) {

  $(".expanded").removeClass("expanded");
  $(this).addClass("expanded");

});

$(".close-expanded").on("click", function(event) {

  $(".expanded").removeClass("expanded");
  
});

＆＃13;

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.expanded { /* replaced :hover with .expanded */
  background: #333333;
}
nav ul li.expanded > a{ /* replaced :hover with .expanded */
    color:#FFFFFF;
}
nav ul li.expanded > ul { /* replaced :hover with .expanded */
  display:block;
}
nav ul ul {
  background: #BEBEBE;
  padding:0;
  text-align: center;
  display:none;
    width: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
        <li class="close-expanded"><a href="#">Home</a></li>
        <li class="expandable"><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 class="expandable"><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li class="close-expanded"><a href="#">Inspiration</a></li>
    </ul>
</nav>

＆＃13;

Answer 3

以下是您的解决方案：

我为你的jsfiddle提供了更新的代码。请看一下

<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');
    });
});

JSFIDDLE

Answer 4

<强> Working fiddle

您可以将children()和toggle()合并为：

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

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

确保添加e.stopPropagation()以阻止事件冒泡。

希望这有帮助。

如何更换悬停在点击

4 个答案: