2014-10-25 5 views
0

У меня есть пароль для ввода пароля, и когда пользователь фокусирует ввод, он показывает popover, описывающий некоторые вещи. И внутри, внизу у меня есть ссылка. Я хочу, чтобы popover расширялся, когда пользователь щелкает по этой ссылке.Как увеличить высоту popover с помощью щелчка

Я попытался добавить класс с важными значениями высоты; Я попытался изменить высоту с помощью .css(); Я попытался изменить высоту всех элементов внутри popover и все еще не работает.

Любые идеи?

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 высоты.

+0

показать нам какой-то код, чтобы мы могли помочь вам –

+0

эти решения звучат правильно. создайте скрипку с тем, что у вас есть –

+0

Я добавил код сейчас. Когда я выполняю JS в Chrome Inspector, он работает. Это так странно. –

ответ

1

Я нашел ответ. Я помещал одно из этих решений внутри события, показанного popover.

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

Надеюсь, что это поможет кому-то с той же проблемой.

Смежные вопросы