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

教程here可能会对您有所帮助。

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

});

CSS下拉导航在点击时打开

3 个答案: