Question

我遇到的问题只存在于Safari中，但适用于所有其他浏览器。

我有一个下拉框，其中填充了从数据库中提取的类别，每个类别都具有“活动”或“非活动”属性。加载页面时，它将仅显示活动类别。我在下拉菜单旁边有一个复选框，选中后，还会显示非活动类别，使用以下jQuery：

$(document).ready(function() {  
$('.inactive').hide();
$('input[type=checkbox]').click(function(){
    var $this = $(this);
    if($this.is(':checked'))
    {
        $('.inactive').show();
    }
    else
    {
        $('.inactive').hide();
    }
});

}）;

下拉框的HTML基本上（只有几个选项）：

<form action="action" method="post">
<div class="label">  
<span class="cats">Category:</span><select name="category_title" >
<option style="display: none;" class="inactive" value="1">Option1</option>
<option style="display: none;" class="inactive" value="23">Option2</option>
<option value="37">Option3</option>
<option value="45">Option4</option>
<input class='view' type='submit' name='select' value='Select' />
</div>
</form>

除了Safari之外，它在每个浏览器中都能很好地运行，它会自动显示非活动类别，不会隐藏它们。

编辑：在查看Andreas的链接并将jQuery更改为：

之后

$(document).ready(function() {  
var inactive = $('.inactive').detach();
$('input[type=checkbox]').click(function(){
    var $this = $(this);
    if($this.is(':checked'))
    {
        $('#category').append(inactive);
    }
    else
    {
        $('.inactive').detach();
    }
});

}）;

好的，我现在有这个工作。它将分离非活动类别并将其附加到所有浏览器中。但是没有出现新的问题：这些类别都属于此下拉框中的主要类别，但是当它被追加时，它会将所有非活动类别添加到底部主要类别中，而不是以任何顺序...

Answer 1

而不是使用

$('input[type=checkbox]').click(function(){
});

使用

$(document).on('click','input[type=checkbox]',function(){
});

jQuery .hide（）函数在Safari中不起作用

1 个答案: