0

私はjqueryを初めて使用しますが、最近多くのことを学んでいます。クリックハンドラーを使用してdivにクラスを追加し、選択されたときにそれを削除しようとしています。私はそれで問題を抱えているので、これが最良の方法であるかどうかはわかりません。多分toggleClassはより良い解決策でしょうか？

これがhtmlです：

   <nav>
        <div class="container">
            <a class="toggleMenu" href="#">Menu</a>
                <ul class="nav">
                    <li><a href="index.html">Barnes</a></li>

                    <li><a href="craig.html">Craig</a></li>

                    <li><a href="bennie-donna.html">Bennie & Donna</a></li>

                    <li><a href="peggy.html">Peggy</a></li>

                    <li><a href="tina.html">Tina</a></li>

                    <li><a href="bennie.html">Bennie</a></li>

                    <li><a href="debbie.html">Debbie</a></li>

                    <li><a href="david.html">David</a></li>

                </ul> 
        </div>  
    </nav> 

<div class="photos-wrap">
        <div class="photos">
            <img src="images/bennie/image1.jpg" alt="pic"/>
            <img src="images/bennie/image2.jpg" alt="pic"/>
            <img src="images/bennie/image3.jpg" alt="pic"/>
            <img src="images/bennie/image4.jpg" alt="pic"/>
            <img src="images/bennie/image5.jpg" alt="pic"/>
            <img src="images/bennie/image6.jpg" alt="pic"/>
            <img src="images/bennie/image7.jpg" alt="pic"/>
            <img src="images/bennie/image8.jpg" alt="pic"/>
            <img src="images/bennie/image9.jpg" alt="pic"/>
            <img src="images/bennie/image10.jpg" alt="pic"/>
        </div>
    </div>

最小のcssは次のとおりです。

.photos-wrap {
    position:absolute;
    top:400px;
}

.photos {
    margin:0 auto;
    width:60%;
    padding-bottom: 300px;
}

.photos img {
    position: relative;
    margin:-20px;
}

.toggleMenu {
    display:  none;
    background: #175E4C;
    text-decoration: none;
    padding: 10px 15px;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border: rgba(0, 0, 0, 0.8);

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;

     background-image: linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -o-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -moz-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -webkit-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -ms-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.45, #175E4C),
    color-stop(1, #7BB5A5)
);
}

.drop-down {
    margin-top:280px;


And lastly the jquery:

$('.toggleMenu').click(function(){
    $('.photos-wrap').addClass('drop-down');

    });

これにより、.toggleMenuをクリックして、クラス'drop-down'を.photosdivに追加できます。.toggleMenuをもう一度クリックしたときに、「ドロップダウン」クラスを削除したいと思います。

誰もがこれを達成する方法を知っていますか？助けが必要。

4

3 に答える 3

0

これを試してみてください：

    $('.toggleMenu').click(function(){
        $('.photos-wrap').toggleClass('drop-down');
    });

興味深いことに、あなたはあなたの投稿でこれについて言及しています。あなたは自分自身に耳を傾けるべきです！

于 2013-03-17T02:17:58.397 に答える
0

あなたはで試すことができますtoggleClass()：

$('.container').on('click', '.toggleMenu', function(){
   $('.photos').toggleClass('drop-down');
});
于 2013-03-17T02:18:09.350 に答える
0

クリックハンドラーでは、toggleClass()代わりにを使用してくださいaddClass()

見る

于 2013-03-17T02:18:28.713 に答える