Question

当隐藏ticketSearchTitle div时，我正在尝试更改标识为ticketSearch的h2标题的文字颜色。但是我用来做的那段代码似乎完全打破了它（即：标题上没有指针图标，无法隐藏div）。

Div结构：

  <h2 id="ticketSearchTitle" >SEARCH</h2>
  <div id="ticketSearch"><div>

完整代码：

$("h2#ticketSearchTitle").css({'cursor':'pointer', 'display':'inline'});

  $("h2#ticketSearchTitle").click(function(){

      $("#ticketSearch").toggle('slow');

       //change h2 text to show that is is inactive
       if ($("h2#ticketSearch").is(':hidden')){
          $("#ticketSearchTitle").css('color','#D3D3D3')
      }

  });

破坏代码的JQuery代码段：

 //change h2 text to show that is inactive
       if $("h2#ticketSearch").is(':hidden'){
          $("#ticketSearchTitle").css('color','#D3D3D3')
      }

Answer 1

忘了添加if

的括号

if ($("h2#ticketSearch").is(':hidden')){

Answer 2

当你将这两个序列一个接一个地执行时，会导致问题，因为切换只是启动一个动画，当你立即检查该元素是否被隐藏时，该动画还没有完成：

$("#ticketSearch").toggle('slow');

//change h2 text to show that is is inactive
if ($("h2#ticketSearch").is(':hidden')){
   $("#ticketSearchTitle").css('color','#D3D3D3')
}

你有几个选择。您可以检查它是否在动画之前隐藏，并对动画前的值进行操作（知道它将被切换）。或者，您可以使用实际动画和完成功能，因此其余代码仅在切换完成后运行。

例如，如果您想在动画完成后运行代码的第二部分，则可以执行以下操作：

$("#ticketSearch").toggle('slow', function() {
    //change h2 text to show that is is inactive
    if ($("#ticketSearch").is(':hidden')){
       $("#ticketSearchTitle").css('color','#D3D3D3')
    }
});

仅供参考，我没有理由使用"h2#ticketSearch"作为您的选择器。 "#ticketSearch"会更快并产生相同的结果。

Answer 3

你忘记了两件事

1）你忘记了if

周围的括号

      if ($("h2#ticketSearch").is(':hidden')){

2）您的ticketSearch是div而不是h2

       if $("h2#ticketSearch").is(':hidden'){ //wrong
       if $("div#ticketSearch").is(':hidden'){ //correct

JSFIDDLE：http://jsfiddle.net/KKgTU/4/

JQuery：当隐藏div时做一些事情

3 个答案: