1

我想制作一个通常显示“联系我们”的底部栏，但是当单击该栏时，它将显示联系方式，再次单击会将栏变成再次说“联系我们”。我尝试了 toggle() ，但这让我陷入了“我们的联系人+”和详细信息都被隐藏的情况。

我想我需要一个 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;
}
4

6 回答 6

3

你可以用这个

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

还要display:inline从 中删除footer2 .more{...}以使其最初隐藏。

于 2012-12-29T00:50:12.460 回答
1

你已经使用.footer .more了我认为你的意思.footer2 .more。您还需要.more使用 javascript 进行隐藏，因为您不能将 css 属性display同时设置为none和inline。最后，我添加了一个声明来切换“联系我们”文本，但如果需要，您可以将其删除。

试试这个：

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

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

});​

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

于 2012-12-29T00:51:55.000 回答
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');
});​

小提琴

于 2012-12-29T00:54:59.643 回答
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()
        });

    });
于 2012-12-29T00:59:20.757 回答
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");

于 2012-12-29T01:02:18.923 回答
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>
于 2015-10-05T12:01:26.310 回答