Question

我想创建一个通常显示“联系我们”的底栏，但是当单击该栏时，它会显示联系人详细信息，再次单击将再次单击“联系我们”。我尝试了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;
}

Answer 1

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{...}以使其最初隐藏。

Answer 2

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

试试这个：

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

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

});

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

Answer 3

我将尝试用一个示例回答您的问题，该示例只需切换容器上的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

Answer 4

这是完整的代码。一些主要的事情妨碍了这种工作。您的切换选择器需要两个类之间的逗号。这会将切换应用于两个元素。您还指定了一个名为.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()
        });

    });

Answer 5

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

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

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

Answer 6

尝试一下它的作品！

<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>

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

感谢

6 个答案: