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)引用元素，并且你已经知道使用#elementId

可以通过id定位元素

$('#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/

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

1 个答案:

答案 - 第一次通过

答案 - 第二次通过

答案 - 第三次通过