-1

我正在通过 Javascript 搞混我的方式，并且可以使用有经验的眼睛来处理一些代码。我正在尝试根据我的一个手风琴 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，似乎需要在手风琴之外才能在页面加载时完全加载。所以我在这里使用这种不透明的技巧来处理显示和隐藏。

非常感谢任何花时间回复的人。

4

4 回答 4

2

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

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

语句的if条件需要用括号括起来。再加上你错过了$和 之前的开场白display。解决这些问题可以：

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

...但这将设置display属性并评估为真实；我认为您正在尝试测试该display属性，因此您需要这个：

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");
            }
        });
    });
于 2012-12-02T03:30:14.977 回答
1

您缺少", for display", 用于关闭, for语句并且也不接受条件，您应该改用 。在这种情况下这是不必要的。但是，即使使用正确的语法，您的代码也不会像您期望的那样，您可以使用或 css 方法作为 getter ，.$/jQuery("section#bubble")})$(function(){()ifelseelse ifis(':hidden')$('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').is(':hidden') ) {
              $("#bg4-5").css("opacity", "0");
        } else {
            $('section.bubble').css("opacity", "1");
        }
    });
})

请注意，ID 必须是唯一的，您应该改用类。

于 2012-12-02T03:31:29.917 回答
0

多亏了您的出色指导，我才明白了发生了什么以及需要什么！这就是我想出的。它很笨重，但它可以完成工作！

            $("h3#bubbleh3").on("click", function(event, ui) {   
                setTimeout(function() {            
                    if ($("section#bubble").css("display") === "none") {
                       $("#bg4-5").css("opacity", "0");
                    } else if ($("section#bubble").css("display") === "block") {
                       $("#bg4-5").css("opacity", "1");
                    }
                }, 500);
            });

再次感谢大家。

于 2012-12-02T09:21:05.107 回答
0 
<!-- Put this code before the </body> tag -->
<script>
        $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: false,
            alwaysOpen: false,
            active: false
        });
        $("h3#bubble").on("click", function(event, ui) {
            $("#bg4-5").toggle();
        });
</script>

只要您想做的只是在单击 h3#bubble 时打开和关闭 #bg4-5 内容，这应该做同样的事情。您只能拥有 1 个 id 为 bubble 的元素，因此如果您需要多个元素，则可以使用 class。

于 2012-12-02T03:46:04.097 回答