3

因此，我编写了一个快速的 jQuery 函数来了解我正在寻找的具体内容，如果有人可以帮助我解决这个问题。我读了几篇关于让一个元素隐藏而另一个元素显示的帖子。我对jQuery没有太多经验，所以我提前道歉。我确实发现你可以同时调用两个，或者你可以使用第二个语句作为回调。我真的只是在寻找能够以适度淡入淡出切换两者显示的东西。我记得我不希望三角形移动，它应该就像文本只是在三角形内部发生变化一样。但是我这里的东西似乎没有效果。我想在页面加载时隐藏第二个三角形，但我无法做到，而且我也无法在点击时隐藏第一个三角形。我只是想快速解决这个问题。提前致谢。

这是HTML：

<div class="buttons">
    <div class="container">
        <div class="button1"><p>1</p></div>
        <div class="button2"><p>2</p></div>
    </div>
</div>

附带jQuery函数：

$(window).load(function(){
    $('.button2').hide();
});
$('.button1').click(function(){
    $('.button1').hide();
    $('.button2').show();
});
$('.button2').click(function(){
    $('.button2').hide();
    $('.button1').show();
});

用一点 CSS：

.buttons{
    width:100%;
}
.buttons .container{
    text-align:center;
}
.button1, .button2{
    display:inline-block;
    width:0;
    height:0;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    border-top:40px solid #CC0000;
    cursor:hand; cursor:pointer;
}
.button1 p, .button2 p{
    position:absolute;
    color:#F9F9F9;
    z-index:9999;
    margin-top:-30px;
    margin-left:-2px;
    font-size:7px;
}

如果有人想改变任何东西，这里是一个jsfiddle 。

4

5 回答 5

12

使用 jquery toggle()方法：

http://jsfiddle.net/4cWH3/6/

$('.button1,.button2').click(function(){
    $('.button1,.button2').toggle();
});
于 2013-06-21T12:07:08.510 回答
4

做这个 ：

$('.button1,.button2').click(function(){
    $('.button1').toggle();
    $('.button2').toggle();
});

首先，您可以监听多个元素，其次 - 该.toggle()功能将根据当前状态为您显示/隐藏

这里的工作示例

.注意：CSS之前缺少 a button2，您需要选择一个库（即 jQuery）

于 2013-06-21T12:05:56.647 回答
1

有一些淡入淡出效果：

$('.button1,.button2').click(function(){
    $('.button1,.button2').filter(':visible').fadeToggle({
       done: function(){
            $(this).siblings().fadeToggle();
        }
    });
});
于 2013-06-21T12:13:34.600 回答
0

解决方案

你的代码工作正常！（即使没有优化）

注意：不要忘记包含jQuery！

您的CSS中缺少一个点：

CSS

.button1, button2{
    display:inline-block;
    width:0;
    height:0;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    border-top:40px solid #CC0000;
    cursor:hand; cursor:pointer;
}

应该从.button1 .button2! button2之前缺少一个点。

JSFiddle

于 2013-06-21T12:08:53.500 回答
0

小提琴

愿这会有所帮助

var toggleButtons = function() {
 $('.button2,.button1').toggle();
} 

$('.button1,.button2'').click(function(){
   toggleButtons();
});
于 2013-06-21T12:14:17.393 回答