javascript - 如何通过单击扩大弹出框高度

Question

我有一个密码输入，当用户聚焦输入时，它会显示一个描述一些内容的弹出窗口。在里面，在底部我有一个链接。我希望当用户单击此链接时弹出窗口会展开。

我尝试添加一个高度值带有 !important 的类；我尝试使用 .css(); 更改高度；我尝试更改弹出窗口内所有元素的高度，但仍然不起作用。

有什么想法吗？

HTML:

<input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" data-toggle="popover" data-placement="right" data-content="<div class='skPopover'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> <a href='#'>Why?</a><div id='more-content' class='hide'>More content here</div></div>" required>

JS:

$('.skPopover a').on('click', function (e){
    e.preventDefault();
    $('#more-content').removeClass('hide');
});

我也尝试过:

$('.skPopover a').on('click', function (e){
    e.preventDefault();
    $('.skPopover').css('height', 290);
});

还有这个:

$('.skPopover a').on('click', function (e){
    e.preventDefault();
    $('.skPopover').addClass('long-popover');
});

long-popover 类的高度为 290px。

Answer 1

我找到了答案。我将其中一个解决方案放入弹出窗口显示的事件中。

$('.form-group').on('shown.bs.popover', function (){
    $('.skPopover a').on('click', function (e){
        e.preventDefault;
        $('.skPopover').toggleClass('long-popover');
    });
});

希望这可以帮助遇到同样问题的人。