Нажмите () и Toggle () - ошибка

Question

Нажмите () и Toggle () - ошибка

0

Я пытаюсь понять методы click() и toggle(), но когда я пытаюсь их реализовать, он, кажется, "отключает" выбранный класс с моей страницы и запускает код. Поскольку исходный класс удаляется с моей страницы, я не могу нажать() снова, чтобы переключить().

Любая идея, что я делаю неправильно? Я много раз искал это и пробовал разные примеры кода, и все, похоже, давали мне тот же эффект "зачистки", как кажется, чтобы очистить мой класс от страницы и влево. Также есть различные случаи, которые мне нужны для использования идентификаторов, поэтому я не могу использовать методы addClass() removeClass().

Вот мой код (я оставил CSS, потому что легче увидеть эффект "снятия", который я имею в виду, когда есть фон, а не только текст):

<!DOCTYPE html>

<html>
  <script src="/jquery.js"></script>
  <head>
    <title>Header</title>
    <style>
    body {
      background: black;
      color: white;
      }
    div {
     background: blue; 
    }
    .adventure{
      position: absolute;
      top: 22px;
      left: 0px;
    }
    .solarSystem{
      position: absolute;
      top: 44px;
      left: 0px;
    }
    </style>
  </head>
  <body>
      <div class="adventure">Choose Own Adventure</div>
      <div class="solarSystem">Solar System</div>
  </body>
      <script>
      $(".adventure").click(
      function(){
      $('.adventure').toggle(function () {
    $(".solarSystem").css({top: "150px"});
}, function () {
    $(".solarSystem").css({top: "250px"});
});
});
      </script>
  </body>
</html>

Любая помощь очень ценится, так как я потратил слишком много времени на устранение этой проблемы, не повезло. :( Благодарю!

Kittteh 12 март 2014, в 21:45

Источник

Теги:

javascript

jquery

html

css

2 ответа

0

Может, попробуй что-нибудь вроде этого?

<Style>
.big-top {top:250px;}
.little-top {top:2150px;}
</style>

<script>
 <script>
$(document).ready(function(){
      $(".adventure").click(
      function(){
            $(".solarSystem").toggleClass("big-top");

       }); 
      $(".solarSystem").click(
      function(){
            $(".adventure").toggleClass("little-top");

       });
});
</script>

Mark 12 март 2014, в 18:15

Ещё вопросы

adeneo · Accepted Answer · 2014-03-12T18-37-00.000Z

Помещение функции toggle() внутри функции click() вероятно, не делает то, что вы думаете, и эта версия toggle() удаляется в более новых версиях jQuery

Вы можете просто создать свою собственную функцию переключения

$(".adventure").on('click', function(){
    var flag = $(this).data('flag');

    $(".solarSystem").css({top: (flag ? "250px" : "150px")});

    $(this).data('flag', !flag);
});

FIDDLE

Именно то, что я пытаюсь сделать, спасибо! Есть ли способ вернуть его к значению CSS по умолчанию, а не устанавливать второе значение вручную? По сути, первый щелчок будет применять новый CSS, а второй щелчок вернет его к настройке по умолчанию и т. Д.