JS切换可见性并更改其他项目的CSS

Question

我确信这非常简单,但我对JS很新,我想知道这样做的最好方法,而不是通过解决方法来解决它.

所以我有一个div块,当按下它上方的文本字段时,它的可见性就会被切换.

<h3 onclick="javascript: toggle1();">
  <span style="cursor:pointer">
    <b>Text1</b>
  </span>
</h3>

<div id="Text1" hidden="hidden">blahblah</div>

然后我有我的JS:

function toggle1() {
  $('#Text1').toggle(1000);
}

这工作正常,但是当用户单击标题文本时,我还想更改其<hr>上方元素的高度

<hr id="line1" style="height:2px;border:none;color:#03930f;background-color:#03930f;" />

我试过添加:

if($('#Text1').is(':visible')) {
  document.getElementById("line1").style.height = "15px";
}
else { 
  document.getElementById("line1").style.height = "2px"; 
}

但这不起作用...我假设因为toggle()函数没有切换is(':visible')条件检查的相同的东西.

这样做的正确方法是什么？

Answer 1

答案 - 第一关

.toggle 确实会影响:visible元素的状态,但是给它一个持续时间(1000)它不是立即的,这意味着如果你想要在它完成后发生某些事情,它需要在一个可选的回调中提供:

$('#Text1').toggle(1000,function(){
    if($('#Text1').is(':visible')) {
        document.getElementById("line1").style.height = "15px";
    }
    else { document.getElementById("line1").style.height = "2px"; }
});

答案 - 第二关

你混合了jquery和vanilla javascript - 虽然没有任何问题,但是它有点令人困惑.坚持一个或另一个.有用的是,在回调中你可以引用元素$(this),并且你已经知道元素可以通过id使用来定位#elementId

$('#Text1').toggle(1000,function(){
    if($(this).is(':visible')) {
         $('#line1').css('height','15px');
    }
    else { 
         $('#line1').css('height','2px');
    }
});

答案 - 第三关

根据上面的说法,你不应该在html中混合使用jquery和老式的事件处理程序 - 再次坚持使用jQuery,如果这就是你在写什么

<h3><span style="cursor:pointer"><b>Text1</b></span></h3>
<div id="Text1" hidden="hidden">blahblah</div>
<hr id="line1" style="height:2px;border:none;color:#03930f;background-color:#03930f;" />

和

$('h3').on('click',function(){
    $('#Text1').toggle(1000,function(){
        if($(this).is(':visible')) {
             $('#line1').css('height','15px');
        }
        else { 
             $('#line1').css('height','2px');
        }
    });
});

更新了jsfiddle:http://jsfiddle.net/xLxsctfk/3/