Javascript JS切换其他项目的可见性和更改css

我相信这是难以置信的简单，但我对JS还是相当陌生的，我想知道做这件事的最好方法，而不是通过一个变通方法来解决它

所以我有一个div块，当按下上面的文本字段时，它的可见性被切换

<h3 onclick="javascript: toggle1();">
  <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;" />

但这不起作用……我假设，因为toggle（）函数不会切换

正在检查的（':visible'）

条件所检查的内容

正确的方法是什么？

回答-第一关

.toggle

确实会影响元素的

：可见的

状态，但在给它一个持续时间（

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）

引用元素，并且您已经知道，可以使用

#elementId

通过id来定位元素

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

答案-第三关 如上所述，您不应该在html中混合使用jquery和老式的事件处理程序——如果您正在编写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;" />

---

更新的JSFIDLE:

我们可以用小提琴演奏你的代码吗？这就是你想要的吗@guvenckardas-更新至work@Jamiec感谢编辑感谢帮助的人。非常感谢。真的很有帮助。是的，我对这一点非常陌生，所以我想象在我的代码中发生了很多糟糕的事情。这更干净。

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

<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');
        }
    });
});