如果將鼠標懸停在另一個上，則在點擊時顯示div並隱藏

我想在懸停時顯示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(); 
    });

檢查在這裏：Fiddle

來源

2014-03-12 Ranjeet

看到這個：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(); 
});

來源

2014-03-12 07:01:11 Anujith

非常感謝它的工作正是我想要的.. :) – Ranjeet

Demo 看DEM O操作。

我有兩個校正

第一：

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

來源

2014-03-12 07:01:33

你可以試試這個

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

感謝

來源

2014-03-12 07:13:33 Andolasoft

請檢查該工作示例可以在這裏找到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(); 
    } 
}); 
});

來源

2014-03-12 07:18:50 CasperSL

如果將鼠標懸停在另一個上，則在點擊時顯示div並隱藏

回答

相關問題