2016-02-15 8 views
0

У меня есть этот HTML код:если ДИВ видно ничего не делать, иначе .show

<ul> 
    <li> 
     <h1> 
     <span id="span0">Lorem</span> 
     <p id="p0">Lorem ipsum dolor sit amet,</p> 
     </h1> 
    </li> 
    <li> 
     <h1> 
     <span id="span1">Lorem2</span> 
     <p id="p1">Lorem ipsum dolor sit amet,</p> 
     </h1> 
    </li> 
    <li> 
     <h1> 
     <span id="span2">Lorem3</span> 
     <p id="p2">Lorem ipsum dolor sit amet,</p> 
     </h1> 
    </li> 
... 
</ul> 

У меня есть эта JS функция, которая показывает абзац, если его продолжительность родственный щелкают:

$('span[id^="span"]').click(function() { 
    $('p[id^="p"]').hide(900); 
    $(this).next('p[id^="p"]').show(900); 
}); 

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

Как написать инструкцию «если», которая будет отображать целевой абзац, только если его текущее состояние скрыто и ничего не делать, если его уже показано?

+0

нас e toggle (900); $ ('Р [ID = "р"]') переключения (900). $ (Это) .next ('р [ID = "р"]') переключения (900). – ameenulla0007

+1

Возможный дубликат [при загрузке и при нажатии hide/show div] (http://stackoverflow.com/questions/35340389/on-load-and-on-click-hide-show-div) –

+0

@JohnSlegers i'm новый для стека, поэтому я не знаю, является ли это дубликат. Мне нужна новая функция, которая останавливает анимацию, если пользователь нажимает на диапазон несколько раз. Должен ли я задать его в редакции по вопросу, на который вы ссылаетесь? – Nele

ответ

0

Просто обновите функцию Нажмите, чтобы следующие

$('span[id^="span"]').click(function() { 
    //check if already visible 
    if(!$(this).next('p[id^="p"]').is(":visible")){ 
     $('p[id^="p"]').hide(900); 
     $(this).next('p[id^="p"]').show(900); 
    } 
}); 
+0

Вам не хватает закрывающей круглой скобки для оператора if, непосредственно перед фигурной скобкой, но да, это решение, которое я искал. благодаря – Nele

1

изменить это

$(this).next('p[id^="p"]').show(900); 

в

$(this).next('p[id^="p"]:hidden').show(900); 

использовать hidden селектор, чтобы выбрать только те элементы, которые скрыты

Смежные вопросы