jQuery - 在点击时隐藏和显示元素

时间:2012-12-29 00:41:15

标签: jquery hide show if-statement

我想创建一个通常显示“联系我们”的底栏,但是当单击该栏时,它会显示联系人详细信息,再次单击将再次单击“联系我们”。我尝试了toggle()但是这样就让我处理了联系人us +和细节都被隐藏的情况。

我想我需要一个else语句,但是我对jQuery的了解却很渺茫。

http://jsfiddle.net/DzYTZ/2/(由于某种原因,它不起作用)

有人可以帮忙吗?

感谢

<div class="footer2"> 
    <a href="#" class="contactus">
        Contact Us
    </a>

    <div class="more">
        <a href="#">
            @twitterhandle
        </a>

        <a href="#">
            e-mail
        </a>
    </div>
</div>

    .footer2
{
background-color: black;
margin-top: 1em;
padding-top: 1em;
padding-bottom: 1em;
text-align: center;
width: 100%;
}
    .footer2 .contactus
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #e3e3e3;
    text-decoration: none;
    display: inline;
}
    .footer2 .contactus:hover
{
    color: white;
}
    .footer2 .more
{
    margin-left: 1em;
    display: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    display: inline;
}
    .footer2 .more a
{
    margin-left: 2em;
    color: #e3e3e3;
    text-decoration: none;
}
    .footer2 .more a:hover
{
    color: white;
}

6 个答案:

答案 0 :(得分:3)

You can use this

$('.footer2').click(function() {
    var display=$('.footer2 .more').css('display') == 'inline' ? 'none' : 'inline'; 
    $('.footer2 .more').css('display', display);
});

同时从display:inline中移除footer2 .more{...}以使其最初隐藏。

答案 1 :(得分:1)

您使用了.footer .more,我认为您的意思是.footer2 .more。您还需要使用javascript隐藏.more,因为您无法将{css属性display设置为noneinline。最后,我添加了一个声明来切换“联系我们”文本,但如果您愿意,可以删除它。

试试这个:

$(function() {
    $('.footer2 .more').hide();

    $('.footer2').click(function() {
        $('.footer2 .more').toggle();
        $('.footer2 .contactus').toggle();
    });

});​

示例:http://jsfiddle.net/grc4/mG5EY/

答案 2 :(得分:1)

我将尝试用一个示例回答您的问题,该示例只需切换容器上的css类以显示和隐藏包含的元素:

HTML:

<div class="container">
    <a class="toggle-details" href="#">Contact Us</a>
    <div class="details">Details</div>
</div>

CSS:

.details-visible .toggle-details {
    display: none;
}
.details {
  display: none;   
}
.details-visible .details {
    display: block;
}

使用Javascript:

$('.toggle-details, .details').on('click', function(e) {
    e.preventDefault();

    $('.container').toggleClass('details-visible');
});​

Fiddle

答案 3 :(得分:1)

这是完整的代码。一些主要的事情妨碍了这种工作。您的切换选择器需要两个类之间的逗号。这会将切换应用于两个元素。您还指定了一个名为.footer的类,它确实存在。最后,.footer2 .more的样式指定了display两次。这就是它在页面加载时显示的原因。在此处更新了示例http://jsfiddle.net/DzYTZ/7/

    .footer2
    {
        background-color: black;
        margin-top: 1em;
        padding-top: 1em;
        padding-bottom: 1em;
        text-align: center;
        width: 100%;
    }

        .footer2 .contactus
        {
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            color: #e3e3e3;
            text-decoration: none;
            display: inline;
        }

            .footer2 .contactus:hover
            {
                color: white;
            }



        .footer2 .more
        {
            margin-left: 1em;
            display: none;
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            color: #e3e3e3;
            text-decoration: none;
        }

            .footer2 .more a
            {
                margin-left: 2em;
                color: #e3e3e3;
                text-decoration: none;
            }

                .footer2 .more a:hover
                {
                    display: none;
                    font-family: 'Open Sans', sans-serif;
                    font-weight: 400;
                    color: white;
                    text-decoration: none;
                }

-

<div class="footer2">
    <a href="#" class="contactus">Contact Us
    </a>
    <div class="more">
        <a href="#">TWITTER HANDLE
        </a>

        <a href="#">EMAIL
        </a>
    </div>
</div>

-

    $(function () {

        $('.footer2').click(function () {

            $('.contactus, .more').toggle()
        });

    });

答案 4 :(得分:0)

如果我理解正确,这就是你想要的DEMO 我拿起你的小提琴并做了一些改变。

    $('.contactus').click(function() {
        if($(".more").css("display") == "none"){
            $(".more").css("display","inline");
        }else{            
            $(".more").css("display","none");
        }
    });

当您点击“联系我们”时,它会隐藏more类,如果它已经隐藏,那么它将使其可见。
我只是跟小提琴一起,但我认为你希望默认隐藏more类,所以你可以在上面的代码之前添加这一行。
$(".more").css("display","none");

答案 5 :(得分:0)

尝试一下它的作品!

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>