javascript - JQuery Accordion 脚本中的 If/Else - 请检查语法

Question

我在 Javascript 中摸索着摸索着，可以用有经验的眼睛看一些代码。我试图根据我的一个 Accordion div 的打开/关闭状态显示/隐藏一个 div。我确定我的代码一团糟，所以我在这里发帖是因为我似乎无法理顺它(我已经处理了几天，所以这并不是因为缺乏尝试)。这是我的脚本:

        <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                alwaysOpen: false,
                active: false
            });
        $("h3#bubble").on("click", function(event, ui) {                
            if ("section#bubble").css(display","none") {
              $("#bg4-5").css("opacity", "0"); }
            else ("section#bubble").css(display","block") {
              $("#bg4-5").css("opacity", "1"); }
            });
        </script>

如果您想知道，#bd4-5 的内容是一个 Spotify iframe，似乎需要在 Accordion 之外才能在页面加载时完全加载。所以我在这里使用这种不透明技巧来处理显示和隐藏。

非常感谢所有花时间回复的人。

Answer 1

您的代码中有几个语法错误:

if ("section#bubble").css(display","none") {

if语句的条件需要用括号括起来。另外你错过了 $和 display 之前的开盘报价.解决这些问题可以得到:

 if ( $("section#bubble").css("display","none") ) {

...但这将设置 display属性并评估为真实；我认为您正在尝试测试 display属性(property)，所以你需要这个:

if ($("section#bubble").css("display") === "none") {

那你在else上也有类似的问题行:

else ("section#bubble").css(display","block") {

我想你的意思是else if , 因为 else (没有 if )不能有条件。你又错过了 $调用 jQuery 函数，display 前的开引号你可能正在尝试测试 display 的当前值而不是设置它。你需要在条件周围加上括号:

else if ($("section#bubble").css("display") === "block") {

您的代码还缺少最后一个 });关闭文档就绪处理程序。

这是我对您要执行的操作的最佳猜测:

    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: false,
            alwaysOpen: false,
            active: false
        });
        $("h3#bubble").on("click", function(event, ui) {                
            if ($("section#bubble").css("display") === "none") {
               $("#bg4-5").css("opacity", "0");
            } else if ($("section#bubble").css("display") === "block") {
               $("#bg4-5").css("opacity", "1");
            }
        });
    });