Javascript 单击时显示div，如果悬停在另一个上则隐藏

我想在悬停时显示div。工作正常。现在，我真正想要的是添加一个类，如果任何用户单击锚定标记，然后显示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();
});

对于锚定标签：

$('#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();
});

看演示

我有两处更正

第一:

$('#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();
});

第二：

<li><a class="first-link parent" rel="first-widget" href="javascript:">First Link</a></li>

您可以试试这个

$("#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>

$（“#testA”）。在（'click'，function（）上{
$（'#testdv'）。toggleClass（'test'）；
$（'#testdv'）.toggle（）；
});
$（“.allOtherdv”）。悬停(
函数（）{
$（'#testdv'）。removeClass（'test'）；
$（'#testdv'）.hide（）；
}
);
目的地分区
任何其他部门

---

谢谢

请检查此处的工作示例

$(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();
    }
});
});