jquery - 单击时打开 CSS 下拉导航

Question

我做了一个 CSS 下拉菜单。但问题是当我将鼠标悬停在菜单上时会出现我的下拉菜单。但是我希望在用户单击菜单时打开下拉菜单。我无法为相同的 jQuery 代码构建框架。请帮助我。任何帮助将不胜感激。提前致谢。

Answer 1

你可以结合 :active 和 :hover 伪选择器在纯 CSS 中实现，

HTML（注意选项卡名称在内容下方）：

<div class="tabs">
  <div class="content">Content 1</div>
  <div>Tab 1</div>
</div>
<div class="tabs">
  <div class="content">Content 2</div>
  <div>Tab 2</div>
</div>

CSS：

.tabs {
  float: left; /* place tabs in one line */
  margin: 10px; /* set margin between tabs */
}
.content {
  display: none; /* hide contents */
  padding-top: 20px; /* content must be below tab */
  position: absolute; /* fix content position */
}
.tabs:active .content {
  display: block; /* open content when clicking*/
}
.content:hover {
  display: block; /* not closing content while cursor is over it */
}

检查示例：http: //jsfiddle.net/vladkras/JJj3G/

Answer 2

这里的教程可能会对您有所帮助。

<script type="text/javascript" >
 $(document).ready(function()
 {

 $(".account").click(function()
 {
var X=$(this).attr('id');
if(X==1)
 {
 $(".submenu").hide();
$(this).attr('id', '0'); 
 }
else
 {
 $(".submenu").show();
$(this).attr('id', '1');
 }

 });

//Mouse click on sub menu
 $(".submenu").mouseup(function()
 {
return false
 });

//Mouse click on my account link
 $(".account").mouseup(function()
     {
return false
 });


//Document Click
 $(document).mouseup(function()
 {
 $(".submenu").hide();
 $(".account").attr('id', '');
 });
 });
</script>

Answer 3

没有看到你的代码一个通用的例子：

jQuery(".Menu").click(function() { //Select menu by its class name or id

    //Select the part of the menu that is shown/hidden 
    //and animate it opening/closing
    jQuery(".DropMenuClassName").animate({height:'toggle'},600);
    //OR
    jQuery(".DropMenuClassName").slideToggle(600);
    //OR
    jQuery(".DropMenuClassName").css({display:"none"});

});