Question

我想在悬停时显示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();
    });

在此处查看：Fiddle

Answer 1

请参阅： Demo

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

Answer 2

Demo 看看演示。

我有两次更正

第一

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

Answer 3

你可以试试这个

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

由于

Answer 4

请查看此工作示例，请访问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();
    }
});
});

如果将鼠标悬停在另一个上，则显示单击并隐藏div

4 个答案: