Получить элемент состояния отображения, выполняемый .slideToggle()?

Я попытался is(':visible'), is(':hidden') и css('display'), но я не могу получить статус отображения элемента после того, как он прошел через .slideToggle()Получить элемент состояния отображения, выполняемый .slideToggle()?

Что мне не хватает?

Вот jsfiddle: http://jsfiddle.net/djlerman/jbNg3/1/

и код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Test Slide Toggle</title> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> 

<style type="text/css"> 
.ui-icon { 
    float:left; 
} 
</style> 

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> 

<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    $('span#expandList').click(function() { 
     if ($(this).attr('class') == "ui-icon ui-icon-triangle-1-s") { 
      $(this).attr('class', "ui-icon ui-icon-triangle-1-e"); 
     } else { 
      $(this).attr('class', "ui-icon ui-icon-triangle-1-s"); 
     } 

     $(this.parentNode).nextAll('ul').eq(0).slideToggle(); 

     $('#debug').html($(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:visible): ' + $(this.parentNode).nextAll('ul').eq(0).is(':visible') + '<br />' + 
         $(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:hidden): ' + $(this.parentNode).nextAll('ul').eq(0).is(':hidden') + '<br />' + 
         $(this.parentNode).nextAll('ul').eq(0).attr('id') + ' .css(display): ' + $(this.parentNode).nextAll('ul').eq(0).css('display') + '<br />' 
         ); 

    }) 

}); 
</script> 
</head> 
<body > 
<h3> 
    <span id="expandList" class="ui-icon ui-icon-triangle-1-s" ></span> 
    Heading 1 
</h3> 
<ul id="heading1"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 


<h3> 
    <span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 2 
</h3> 
<ul id="heading2"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 


<h3> 
    <span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 3 
</h3> 
<ul id="heading3"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 
<div id="debug"></div> 
</body> 
</html>

источник

2013-10-08 Donavon Lerman

IDs ** must ** be unique. – j08691

ждать slideToggle закончить до проверки статуса.

$(this.parentNode).nextAll('ul').eq(0).slideToggle(
     (function() { 

      $('#debug').html($(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:visible): ' + $(this.parentNode).nextAll('ul').eq(0).is(':visible') + '<br />' + 
         $(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:hidden): ' + $(this.parentNode).nextAll('ul').eq(0).is(':hidden') + '<br />' + 
         $(this.parentNode).nextAll('ul').eq(0).attr('id') + ' .css(display): ' + $(this.parentNode).nextAll('ul').eq(0).css('display') + '<br />' 
         ); 

     }).bind(this) 
    );

источник

2013-10-08 16:54:50

Это сработало. Спасибо. Есть ли еще способ подождать завершения слайда? Вот обновленный jsFiddle: http://jsfiddle.net/djlerman/jbNg3/3/ –

Что делает «.bind (this)»? –

, когда функция выполняется, «это» будет ссылаться на любой контекст, на который была вызвана функция. Чтобы заставить его ссылаться на объект «span # expandList», который «this» означает вне функции, используется bind. Это эквивалентно jQuery.proxy http://api.jquery.com/jQuery.proxy/ –

Однажды gp. упомянутая концепция «финиша событий», я смог найти эту тему.

jQuery wait for event to complete

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

Вот обновленный jsFiddle: http://jsfiddle.net/djlerman/jbNg3/3/

и обновленный код.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Test Slide Toggle</title> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> 

<style type="text/css"> 
.ui-icon { 
    float:left; 
} 
</style> 

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> 

<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    $('span#expandList').click(function() { 
     if ($(this).attr('class') == "ui-icon ui-icon-triangle-1-s") { 
      $(this).attr('class', "ui-icon ui-icon-triangle-1-e"); 
     } else { 
      $(this).attr('class', "ui-icon ui-icon-triangle-1-s"); 
     } 

     $(this.parentNode).nextAll('ul').eq(0).slideToggle(function() { 

      $('#debug').html($(this).attr('id') + ' is(:visible): ' + $(this).is(':visible') + '<br />' + 
          $(this).attr('id') + ' is(:hidden): ' + $(this).is(':hidden') + '<br />' + 
          $(this).attr('id') + ' .css(display): ' + $(this).css('display') + '<br />' 
          ); 
     }).bind(this); 

    }) 

}); 
</script> 
</head> 
<body > 

<div id="debug"><br /><br /><br /></div> 
<hr /> 

<h3> 
    <span id="expandList" class="ui-icon ui-icon-triangle-1-s" ></span> 
    Heading 1 
</h3> 
<ul id="heading1"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 


<h3> 
    <span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 2 
</h3> 
<ul id="heading2"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 


<h3> 
    <span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 3 
</h3> 
<ul id="heading3"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

</body> 
</html>

источник

2013-10-08 20:51:10

Получить элемент состояния отображения, выполняемый .slideToggle()?

ответ

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