我目前有使用mouseenter和mouseleave的jQuery函数。这当前给了我想要的效果,一旦鼠标离开div,一切都恢复正常。我试图复制这个,但是使用click,我正在阅读关于on()和off(),但我不认为这可以使用。以下是我的代码。
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery('#home-grid-one-two').mouseenter(function(){
$('#home-grid-two-one').css({
'visibility': 'hidden'
});
$('#home-grid-two-two').css({
'visibility': 'hidden'
});
$('#home-grid-two-three').hide();
$('#home-grid-three-three').hide();
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
});
jQuery('#home-grid-one-two').mouseleave(function(){
$('#home-grid-two-one').css({
'visibility': 'visible'
});
$('#home-grid-two-two').css({
'visibility': 'visible'
});
$('#home-grid-three-two').show();
$('#home-grid-two-one').show();
$('#home-grid-three-one').show();
$('#home-grid-two-three').show();
$('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
HTML
<div id="home-grid-one-one" class="home-grid">
<div class="page" title="Page 2">
<p class="leftpara"> Some Text.</p>
</div>
<div id="home-grid-one-two" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;">Anthony &
Thomas</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-one-three" class="home-grid"> <div class="page" title="Page 2">
<p class="rightpara"> Some Text.</p>
</div>
<div id="home-grid-two-one" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;">Award winning</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-two-two" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;"><strong>Proven
to deliver</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-two-three" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p style="text-align: center;">Development
Process</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-three-one" class="home-grid"> <div class="page" title="Page 2"></div>
<div class="page" title="Page 2"></div>
<div id="home-grid-three-two" class="home-grid"> <div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 2">
<div class="layoutArea">
<div class="column">
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p class="ptagexp" style="text-align: center;">Experience in
many markets</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="home-grid-three-three" class="home-grid"> <div class="page" title="Page 2"></div>
答案 0 :(得分:1)
jquery点击事件的示例如下
vStart
或
jQuery(".leftpara").click(function(){
//do something here
});
或
jQuery(".leftpara").on("click",function(){
//do something here
});
答案 1 :(得分:0)
我设法通过在每个功能中添加一个计数器来获得所需的效果。我首先初始化计数器变量,然后在单击触发器中添加一个。然后我有一个IF语句,所以当点击次数达到2时,它会将值更改回默认值并重置计数器。以下是一个例子
(function() {
var count = 0;
jQuery('#home-grid-one-two').click(function () {
count += 1;
jQuery('#home-grid-two-one').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-two').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
'background-size': 'cover'
});
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
'margin-top': '-450px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '-420px'
});
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
if (count == 2) {
jQuery('#home-grid-two-one').css({
'visibility': 'visible'
});
jQuery('#home-grid-two-two').css({
'visibility': 'visible'
});
jQuery('#home-grid-three-two').show();
jQuery('#home-grid-three-two').css('background-image', 'none');
jQuery('#home-grid-two-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-two-one').show();
jQuery('#home-grid-three-one').show();
jQuery('#home-grid-two-three').show();
jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
}
});
})();