Javascript 根据引导折叠状态更改按钮

我正在使用引导

我有下面的HTML代码：

 <div class="row">
        <button id="dog-btn" data-toggle="collapse" data-target="#dog-section" onclick="petToggle()">Show Pet</button>
    </div>


    <div class="col-12 collapse" id="dog-section">

在我的网站上，狗的起始状态是可变的。有时可以看到，有时可以关闭。我尝试用jquery使用：hidden和：visible来获取div的初始状态，但它不起作用，因为它总是返回true或false。我想要的结果是：如果狗的部分是隐藏的，因为引导下拉，我希望按钮读显示宠物。如果狗部分是可见的，我希望它读隐藏宠物

---

有人能帮忙吗？

使用条件检查css是否设置为可见，如果设置为隐藏

使用jQuery： 检查：

if(dogSection.css('visibility') === 'hidden'){
  // make it visible
}else{
  // hide it
}

要设置为可见，请执行以下操作：

dogSection.css('visibility', 'visible')

要设置隐藏，请执行以下操作：

dogSection.css('visibility', 'hidden')

const$btn=$（“#dog btn”）
常量$dogSection=$（“#dog section”）
函数petToggle（）{
$btn.单击（函数（）{
if（$dogSection.css（'visibility'）='hidden'）{
$dogSection.css（'可见性'，'可见'）
$btn.text（“隐藏宠物部分”）
}否则{
$dogSection.css（'可见性'，'隐藏'）
$btn.text（“显示宠物部分”）
}
})
}
petToggle（）

#狗形部分{
可见性：隐藏；
}

展示宠物区

删除

petToggle

功能。您需要使用折叠事件来实现所需的功能。给你

由于dog部分最初可能隐藏或显示，因此可以检查部分的显示样式并相应地更改按钮文本

//检查dog部分的初始显示状态
//如果隐藏，请将按钮文本设置为“显示宠物”
//如果显示，将按钮文本设置为“隐藏宠物”
if（$（“#狗段”）.css（“显示”）=“无”）{
$（“#狗btn”）.text（“显示宠物”）；
}否则{
$（“#狗btn”）.text（“隐藏宠物”）；
}
//当显示“狗”部分时，将按钮文本设置为“隐藏宠物”
$（“#dog section”）。打开（“show.bs.collapse”，函数（）{
$（“#狗btn”）.text（“隐藏宠物”）；
});
//当狗狗部分隐藏时，将按钮文本设置为“显示宠物”
$（“#dog section”）。关于（“hide.bs.collapse”，函数（）{
$（“#狗btn”）.text（“显示宠物”）；
});

展示宠物
我的同僚们都是精英。我是一个专业人士。我的错误是暂时的，官方的，在实验室里的错误是巨大的！奥迪特。

dogSection.css('visibility', 'hidden')