Question

我的另一个问题。我实际上正在编写一个HTML / CSS3 / jQuery项目，目的是了解更多信息:-)。

我可以解决所有问题，除了一个，这让我头疼得厉害。

就是这样：我想通过jQuery为按钮元素设置一个样式。在页面加载时将其设置为display:none。

<div class="header">
    <img id="button" src="img/back_button.jpg"/>
</div>

使用css;

#button{
  padding-top: 10px;
  padding-left: 15px;
  float:left;
  display: none;
}

该按钮的功能是折叠我点击时使用的所有手风琴。

$('#button').bind('click',function(){
        $('.accord').collapsible("option","collapsed", true );
    });

因此，我需要询问手风琴/可折叠的状态，并在手风琴处于活动状态时将style.display设置为阻止。只有手风琴打开，我才想看按钮。我尝试了几件事;

var status = $('[data-role=collapsible]).hasClass('ui-collapsible-collapsed')
if(status){
        $('#button').css("display", "block")
    }
    else{console.log("foo")}

或

$("[data-role=collapsible]").on('collapse', $.proxy(function () {
            $('#button').css("display", "block")
        }, this)).on('expand', $.proxy(function () {
            $('#button').css("display", "none")
        }, this));

或

if($('.accord').collapsible("option","collapsed", true )){
        $('#button').show();
    }
    else if($('.accord').collapsible("option","expand", true )){
        $('#button').hide();
}

但不知怎的，我无法得到我想要的结果。你们（和女孩们）可以帮助我吗？

Answer 1

在collapsiblecollapse和collapsibleexpand事件中，检查当前是否有任何可折叠信息（$("[data-role=collapsible]").not(".ui-collapsible-collapsed").length > 0）并根据此显示或隐藏按钮：

$(document).on("pagecreate", "#page1", function(){
    $("#btnCollapse").hide();

    $("#btnCollapse").on("click", function() {
        $('[data-role=collapsible]').collapsible("option","collapsed", true );
    });

    $('[data-role=collapsible]').on("collapsiblecollapse collapsibleexpand", function(){
        if ( $("[data-role=collapsible]").not(".ui-collapsible-collapsed").length > 0){
            $("#btnCollapse").show();   
        } else {
            $("#btnCollapse").hide();
        }
    });
});

<强> DEMO

Answer 2

它现在适用于此js

define(['jquery', 'jqueryMobile'], function($) {

    if($('.accord').collapsible("option","collapsed", true )){
    $('#button').hide();
}

$('[data-role=collapsible]').on("collapsiblecollapse collapsibleexpand", function(){
        if ( $("[data-role=collapsible]").not(".ui-collapsible-collapsed").length > 0){
            $("#button").show();
            $('#button').bind('click',function(){
                $('.accord').collapsible("option","collapsed", true );
            });
        } else {
            $("#button").hide();
        }
    });
});

通过jquery操作Button的样式元素：取决于另一个元素的状态

2 个答案: