переключение div if - PullRequest
Новая
       12

переключение div if

1 голос
/ 11 декабря 2011

У меня есть этот HTML: 

<div id="parent1" class="article">
   <div class="action"></div>
   <div id="exp1" class="expand"></div>
</div>
<div id="parent2" class="article">
   <div class="action"></div>
   <div id="exp2" class="expand"></div>
</div>

и CSS: 

.article:hover .action {
   z-index:1000;
}
.expand {
   display: none;
} 
action {
   background: url(../images/down.png) 0 0 no-repeat;
   z-index: -999;
}
.collapse {
   background: url(../images/up.png) 0 0 no-repeat !important;
   z-index: 1000;
}

и Javascript: 

$(".article").click(function() {
   $(this).find(".action").toggleClass("collapse"); // works onclick div article
   ????????? // when press parent1 if parent2 pressed before ???????.find(".action").toggleClass("collapse");
   $("#exp2").hide(); // if previously open
   $("#exp1").toggle(300);
}

Теперь мне нужен jQuery для onclick parent1, чтобы переключить действие класса в parent2, но только если он обычно переключается на коллапс.

Ответы [ 2 ]

0 голосов
/ 11 декабря 2011

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

$(".article").click(function() {
   // see explanations 1 and 2 below
   $('.article.active').removeClass('active').find('#exp1').hide();

   // see explanation 3 below
   $(this).addClass('active').find('#exp2').show();
}

Вы можете изменить код в соответствии со своими потребностями, но вы понимаете это:

  1. Когда мы нажимаем на .article, мы ищем любой другой .article с определенным классом (.active в моем примере).Технически, вероятно, будет только один из .article.active
  2. . Мы удаляем его .active класс и делаем что-то с ним или его дочерним элементом
  3. Мы наконец-то делаем все, что с нажатой статьей
0 голосов
/ 11 декабря 2011

Есть несколько способов сделать это.Обычно я храню локальную переменную, которая содержит состояние раскрывающегося списка (логическое значение), и просто проверяю это.

В jQuery, поскольку вы уже используете hide (), вы можете использовать: 

if ($("#exp2").is(":hidden")) {
    // Show content, set arrow to up.
    $("#exp2").removeClass("expand").addClass("collapse");
}
else {
    // Hide content, set arrow to down.
    $("#exp2").removeClass("collapse").addClass("expand");
}

Переключение имело бы больше смысла, если бы вы просто добавляли и удаляли класс.Здесь вы чередуете классы.Использование addClass () и removeClass () очень ясно показывает, что вы делаете.

...