[英]show div on click and hide if hover on another
I want to show div on hover. 我想在悬停时显示div。 Its working fine. 它的工作正常。 Now what actually I want is to add a class if any user click on anchor tag then display div and not hide if mouse leaves on it. 现在,我实际上想要添加的是一个类,如果有任何用户单击锚标记,则显示div,如果鼠标停留在其上则不隐藏。 Class will get removed if user clicks on anchor tag again or hovered on another div. 如果用户再次单击锚标记或将鼠标悬停在另一个div上,则该类将被删除。
$('#main-menu a').mouseover(function() {
var $this = $(this);
var id = $this.attr('rel');
var $currentWidget = $('#' + id);
$currentWidget.show().siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
$('.widget-container').hide();
});
$('#main-menu a').click(function() {
var $this = $(this);
var id = $this.attr('rel');
var $currentWidget = $('#' + id);
$currentWidget.addClass('active').siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
$('.widget-container').hide();
});
$('#main-menu a').mouseover(function() {
var $this = $(this);
var id = $this.attr('rel');
var $currentWidget = $('#' + id);
$currentWidget.show().siblings('.widget-container').removeClass('active').hide();
});
And for the anchor tag: 对于锚标记:
$('#main-menu a').click(function(e) {
var $this = $(this);
var id = $this.attr('rel');
var $currentWidget = $('#' + id);
$currentWidget.toggleClass('active').siblings('.widget-container').removeClass('active').hide();
e.preventDefault();
});
I have two correction 我有两个更正
first: 第一:
$('#main-menu a').mouseover(function() {
var $this = $(this);
var id = $this.attr('rel');
var $currentWidget = $('#' + id);
$('.active').removeClass('active');
$currentWidget.show().siblings('.widget-container').hide();
});
Second: 第二:
<li><a class="first-link parent" rel="first-widget" href="javascript:">First Link</a></li>
You may try this 你可以试试这个
$("#testA").on('click',function() {
$('#testdv').toggleClass('test');
$('#testdv').toggle();
});
$(".allOtherdv").hover(
function() {
$('#testdv').removeClass('test');
$('#testdv').hide();
}
);
<a href="javascript:void(0);" id="testA" >Click Me</a>
<div id="testdv" style="display:none;margin-top:30px;">Destination Div</div>
<div class="alldv">Any other Div</div>
Thanks 谢谢
please check this working example can be found here http://jsfiddle.net/Ravindu/b6VF3/ 请检查此工作示例,可在此处找到http://jsfiddle.net/Ravindu/b6VF3/
$(document).ready(function() {
$('#main-menu a').mouseover(function() {
var $this = $(this);
var id = $this.attr('rel');
var $currentWidget = $('#' + id);
$currentWidget.show().siblings('.widget-container').hide();
if ($('.widget-container').hasClass('active')) {
$('.widget-container').removeClass('active');
}
});
$('#main-menu a').click(function() {
var $this = $(this);
var id = $this.attr('rel');
var $currentWidget = $('#' + id);
$currentWidget.addClass('active').siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
if ($('.widget-container').hasClass('active')) {
}else{
$('.widget-container').hide();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.