1

通常は「お問い合わせ」と表示される下部バーを作成したいのですが、バーをクリックすると連絡先の詳細が表示され、もう一度クリックするとバーが「お問い合わせ」と表示されます。私は toggle() を試しましたが、その後、Contacts 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;
}
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

コンテナーの 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

これが完全なコードです。いくつかの主な理由により、これが機能しませんでした。トグル セレクターでは、2 つのクラスの間にコンマが必要でした。これにより、トグルが両方の要素に適用されます。存在していたという名前のクラスも指定しました.footer。最後に、 のスタイルが2 回指定され.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 に答える
1

あなたは.footer .more私があなたが意図したと思う場所で を使用しまし.footer2 .moreた。css プロパティを と の両方に設定する.moreことはできないため、javascript で非表示にする必要もあります。最後に、「お問い合わせ」テキストを切り替えるステートメントを追加しましたが、必要に応じて削除できます。displaynoneinline

これを試して：

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

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

});​

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

于 2012-12-29T00:51:55.000 に答える
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 に答える