Question

我有这个jquery代码，在点击时按下内容：

<script>
$(document).ready(function() {
  $('#showhide').click(function() {
    if($('#author-dropdown').css('display') == 'none') {
      $('#author-dropdown').slideDown();
    } else {
      $('#author-dropdown').slideUp();
    }
    return false;
  });
});
</script>

我想加一个不同的ID。所以，让我们说当脚本显示== none时，用户应该看到#author-dropdown，当display == block时，id应该是#author-dropdown-extended。我应该如何修改此脚本以实现它？

Answer 1

请注意，您可能不应该动态更改文档中的ID - 请使用class属性。但你可以，如果你真的想 - 使用jQuery 1.6 +：

var $elem = $('#author-dropdown');
$elem.prop('id', 'new-id');

在较旧的jQuery版本中，只需使用.attr()代替.prop()。

Answer 2

$('#author-dropdown').attr("id","author-dropdown-extended").slideDown();

并更改以下内容以将其设置回原始状态

$('#author-dropdown-extended').attr("id","author-dropdown").slideUp();

我会亲自尝试这样的事情......

$('#showhide').click(function() {
    if($('.author-dropdown').is(':hidden')) {
      $('.author-dropdown').slideDown().removeClass('author-dropdown').addClass('author-dropdown-extended');
    } else {
      $('.author-dropdown').slideUp().removeClass('author-dropdown-extended').addClass('author-dropdown');
    }
    return false;
  });

Answer 3

修改此脚本？试试这个。

$(document).ready(function() {
    $('#showhide').click(function() {
        if ($('#author-dropdown').css('display') == 'none') {
            $('#author-dropdown-extended').slideUp('fast', function() {
                $('#author-dropdown').slideDown('slow');
            });
        } else {
            $('#author-dropdown').slideUp('fast', function() {
                $('#author-dropdown-extended').slideDown('slow');
            });
        }
        return false;
    });
});

我想修改我的jquery脚本以添加不同的#id

3 个答案: