添加悬停并单击事件到下拉按钮-Jquery

我添加了悬停并单击事件以打开下拉内容。添加悬停并单击事件到下拉按钮-Jquery

它作为工作的效果，但有轻微毛刺

悬停，内容是开放罚款和悬停隐藏。

在第一次点击它是开放罚款，但在第二次单击它并不会立即结束，我需要退出悬停状态，看第二次点击效果

HTML：

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<style> 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    padding: 12px 16px; 
    z-index: 1; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.openCont{ 
    display:block !important; 
} 

.closeCont{ 
    display: none !important; 
} 
</style> 
</head> 
<body> 

<h2>Hoverable Dropdown</h2> 
<p>Move the mouse over the text below to open the dropdown content.</p> 

<div class="dropdown"> 
    <button>Mouse over me</button> 
    <div class="dropdown-content"> 
    <p>Hello World!</p> 
    </div> 
</div> 

    <div class="dropdown"> 
    <button>Mouse over me</button> 
    <div class="dropdown-content"> 
    <p>Hello World!</p> 
    </div> 
</div> 

</body> 
</html>

JS：

$(".dropdown").click(function(){ 
    console.log('toggle') 
    $(this).find("div.dropdown-content").toggleClass('openCont'); 

});

来源

2017-02-18 divya reddy

当然重要像这样，因为你仍然是'徘徊'它说应该是可见的 – LGSon

为什么都使用'悬停'和'点击'？ ...我的意思是，如果'click'应该正常工作，'hover'不会，反之亦然 – LGSon

@LGSon，实际上悬停只是为了一目了然地看到内容，但我有要求打开它点击使内容可见和第二次点击隐藏它 –

如果你喜欢这款，将工作，增加一个mouseout处理

$(".dropdown").mouseout(function(){ 
    $(this).find("div.dropdown-content").removeClass('closeCont'); 
});

更新您的JS

$(this).find("div.dropdown-content").toggleClass('openCont closeCont'); 
if ($(this).is(":hover")) { 
    $(this).find("div.dropdown-content").addClass('closeCont'); 
}

更新你的CSS改变这个规则在这条规则

.dropdown:hover .dropdown-content:not(.closeCont) { 
    display: block; 
}

交换顺序，以便openCont是最后一个（和删除!important）

.closeCont{ 
    display: none; 
} 
.openCont{ 
    display:block; 
}

让它起作用的是你点击后隐藏它，但它隐藏了一个小号一旦你移动鼠标之外，还消除了closeCont徘徊

时，这将使它重新工作

栈片断

$(".dropdown").click(function(){ 
 
    console.log('toggle') 
 
    $(this).find("div.dropdown-content").toggleClass('openCont closeCont'); 
 
    if ($(this).is(":hover")) { 
 
     $(this).find("div.dropdown-content").addClass('closeCont'); 
 
    } 
 
}); 
 

 
$(".dropdown").mouseout(function(){ 
 
    $(this).find("div.dropdown-content").removeClass('closeCont'); 
 
});

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
    z-index: 1; 
 
} 
 
.dropdown:hover .dropdown-content:not(.closeCont) { 
 
    display: block; 
 
} 
 
.closeCont{ 
 
    display: none; 
 
} 
 
.openCont{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<h2>Hoverable Dropdown</h2> 
 
<p>Move the mouse over the text below to open the dropdown content.</p> 
 

 
<div class="dropdown"> 
 
    <button>Mouse over me</button> 
 
    <div class="dropdown-content"> 
 
    <p>Hello World!</p> 
 
    </div> 
 
</div> 
 

 
    <div class="dropdown"> 
 
    <button>Mouse over me</button> 
 
    <div class="dropdown-content"> 
 
    <p>Hello World!</p> 
 
    </div> 
 
</div>

来源

2017-02-18 23:32:16 LGSon

谢谢@LGSon，但其中一个问题是，要做第二次点击工作，我需要取消隐藏并将鼠标悬停并点击。同样的问题，我现在面临:( –

@divyareddy更新与修复 – LGSon

..感谢很多，它按预期工作:) –

这不是一个小故障：你告诉它，“当悬停显示面板“和”在第一次点击显示面板“，然后”在第二次点击unshow面板“，但是当你点击你仍然悬停实际按钮，所以悬停事件仍然触发。

我做了一个的jsfiddle雅所以你可以看到我是如何解决这个问题： https://jsfiddle.net/Voltra/v7q60217/1/

$(".dropdown").on("mouseover",function(){ 
    console.log('hovering'); 
    $(this).find("div.dropdown-content").css("display","block"); 
}); 

var cl = 0; 

$(".dropdown").on("mouseleave",function(){ 
    console.log('not hovering'); 
    if(cl!=1){ 
    $(this).find("div.dropdown-content").css("display","none"); 
    } 
}); 

$(".dropdown").on("click",function(){ 
    console.log('toggle') 
    $(this).find("div.dropdown-content").toggleClass('openCont'); 
    cl+=1; 
    if(cl == 2){ 
     cl=0; 
     $(this).trigger("mouseleave"); 
    } 
});

编辑：什么是一个工作版本以上 https://jsfiddle.net/Voltra/v7q60217/3/

$(".dropdown").on("mouseover",function(){ 
    console.log('hovering'); 
    $(this).find("div.dropdown-content").css("display","block"); 
}); 


$(".dropdown").on("mouseleave",function(){ 
    console.log('not hovering'); 
    if($(this).prop('cl')!=1){ 
     $(this).find("div.dropdown-content").css("display","none"); 
    } 
}); 

$(".dropdown").on("click",function(){ 
    if($(this).prop('cl') === undefined){ 
     $(this).prop('cl',0); 
    } 
    console.log('toggle'); 
    $(this).find("div.dropdown-content").toggleClass('openCont'); 
    $(this).prop('cl',$(this).prop('cl')+1); 
    if($(this).prop('cl') == 2){ 
     $(this).prop('cl',0); 
     $(this).trigger("mouseleave"); 
    } 
});

来源

2017-02-18 23:32:29 Vivick

谢谢@Vivick，如果我点击打开这两个按钮，第二次点击是不关闭内容 –

有点棘手：/我会看看我能想出什么 – Vivick

是@Vivick ... –

添加悬停并单击事件到下拉按钮-Jquery

回答

相关问题