Question

如果满足某些条件，如何使菜单可点击或丢弃？在这种情况下，我希望菜单仅在单击按钮时可单击或可丢弃

＆＃13;

ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
    white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="try.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="drop-nav">
    <li><a href="#">Content Management</a>
        <ul>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">Concrete 5</a></li>
        </ul>
    </li>
</ul><br><br><br>
<button>Click me</button>
</body>
</html>

＆＃13;

Answer 1

一种解决方案是为悬停使用额外的类规则（用于下拉列表），并在单击按钮时将类添加到<div class="top"> <div class="inner"></div> </div> <div class="buttom"> </div> .top{ position:relative; width:100%; height:300px; background-color:yellow; } .inner{ position:absolute; width:300px; height:300px; top:50px; left:100px; background-color:red; z-index:3; } .buttom { position:relative; width:100%; height:300px; background-color:black; }。

对于点击处理程序，您也可以这样做，以查看ul是否点击了类

＆＃13;

ul

＆＃13;

$('#clickme').click(function(){
  $('#drop-nav').addClass('clicked')
})

＆＃13;

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  display: block;
  position: relative;
  float: left;
  border: 1px solid #000
}
li ul {
  display: none;
}
ul li a {
  display: block;
  background: #000;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
#drop-nav.clicked li a:hover {
  background: #f00;
}
#drop-nav.clicked li:hover ul {
  display: block;
  position: absolute;
}
#drop-nav.clicked li:hover li {
  float: none;
}
#drop-nav.clicked li:hover a {
  background: #f00;
}
#drop-nav.clicked li:hover li a:hover {
  background: #000;
}
#drop-nav.clicked  li ul li {
  border-top: 0px;
}

＆＃13;

如果满足某些条件，如何使菜单可点击？

1 个答案: