Как я могу вернуть свой div к исходному цвету фона при втором щелчке?

Я использую функцию анимации jquery addClass и removeClass.

Что я делаю, так это когда ссылка нажата... появится выпадающая навигация... это для отзывчивого сайта... но все это работает. Однако происходит следующее... Когда нажимается ссылка, класс div изменяется, а класс ссылки изменяется... это работает

однако, когда ссылка теперь нажата во второй раз... я хочу, чтобы оба класса вернулись к классам по умолчанию, в которых они находились

это мой код:

<div class="display-menu">
<div class="container">
<a id="displaymenu" class="click" style="color:#ffffff;" href="javascript:slideToggle();">In This Section</a>
<script>
    $("a.click").click(function(){
        $("div.display-menu").removeClass("display-menu").addClass("display-menu1");
        $("a.click").removeClass("click").addClass("current");
    });
</script>
</div>
</div>

У кого-нибудь есть идеи для меня?


html jquery css addclass removeclass
person Chris Jenks    schedule 20.02.2013    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Добавлен идентификатор в верхний div и изменен код, чтобы он был надежным для идентификаторов элементов.

<div class="display-menu" id="displaydiv">
    <div class="container">
        <a id="displaymenu" class="click" style="color:#ffffff;" href="javascript:slideToggle();">In This Section</a>
        <script>
            $("a.click").click(function(){
                $("div#displaydiv").toggleClass("display-menu display-menu1");
                $("a#displaymenu").toggleClass("click current");
            });
        </script>
    </div>
</div>
person gregjer    schedule 20.02.2013
comment
Я считаю, что в этом подходе есть недостаток, так как при втором щелчке div.display-menu и a.click не будет существовать. - person Tom Hubbard; 20.02.2013

arrow_upward
4
arrow_downward

Попробуйте с toggleClass

    $("div.display-menu").toggleClass("display-menu").toggleClass("display-menu1");
    $("a.click").toggleClass("click").toggleClass("current");
person Billy Moon    schedule 20.02.2013
comment
toggleClass может обрабатывать более одного класса, поэтому нет необходимости вызывать их дважды в каждой строке. - person Tom Hubbard; 20.02.2013

arrow_upward
1
arrow_downward

Поскольку вы меняете классы, вам лучше использовать идентификаторы в качестве селекторов и, как говорили другие, использовать класс переключения.

В противном случае выбор в обработчике не будет работать при втором щелчке.

<div id="display-menu-div" class="display-menu">

$("#displaymenu").click(function(){
    $("#display-menu-div").toggleClass("display-menu display-menu1");
    $("#displaymenu").toggleClass("click current");
});
person Tom Hubbard    schedule 20.02.2013