Выпадающее окно Bootstrap с jquery

У меня есть форма, и я пытаюсь использовать раскрывающийся список в качестве индикатора сообщений. Когда я сосредотачиваюсь на вводе, выпадающий список отображает. Проблема в том, что он закрывается сразу после показа.Выпадающее окно Bootstrap с jquery

<form method="post"> 
    <input id="name" type="text" name="name"> 
    <li class="dropdown list-unstyled"> 
     <a class="dropdown-toggle" role="button"data-toggle="dropdown"></a> 
     <ul class="dropdown-menu"> 
      My message. 
     </ul> 
    </li> 
</form>

Jquery

$(document).ready(function(){ 
    $('#name').focusout(function() { 
     $('.dropdown-toggle').dropdown('toggle'); 
    }); 
});

Я не мог понять, почему она закрывает все же. Странно то, что если я нахожусь снаружи и немного перетаскиваю мышь, прежде чем выпустить его, выпадающее меню не будет закрыто. Спасибо!

скрипку https://jsfiddle.net/syp7ynqm/

редактировать: проблема, кажется, что выпадающий определяет внешний щелчок сразу после шоу, так что она закрывает (как это должно быть), но я хотел бы отключить эту функцию, только для этого первого нажмите, чтобы в фокусе сообщение отображалось правильно.

источник

2016-01-21 alfix

Вы можете просто пойти с помощью метода шоу. Fiddle.

$(document).ready(function(){ 
    $('#name').focusout(function() { 
     $('.dropdown-menu').show(); 
    }); 
});

И ваш HTML должен выглядеть следующим образом потому, что Ли должен быть ребенком ул, так что вы хотели бы пойти с падающей HTML.

<form method="post"> 
    <input id="name" type="text" name="name"> 
    <div class="dropdown"> 
     <div class="dropdown-menu"> 
      My message. 
     </div> 
    </div> 
</form>

источник

2016-01-21 21:11:13

Вы не используете функцию bootstrap, я бы хотел использовать это, потому что мне не нужно было добавлять CSS. Это самый близкий ответ, хотя, если я не получу другого, я пойду с этим. Благодаря! – alfix

Хорошо, так что это в основном то же самое, что и при использовании bootstraps, но я отредактировал свой ответ, чтобы полностью использовать загрузку. Кроме того, я немного отредактировал ваш html, чтобы сделать его правильным, поскольку li должен быть дочерним элементом ul и не должен быть вне элемента ul, чтобы сделать его правильной разметкой. Но я включил и обновил скрипку, чтобы снова проверить скрипку, и вам должно быть хорошо идти. –

$(document).ready(function(){ 
 
    $('#name').focusout(function() { 
 
     $('.dropdown-menu').toggle(); 
 
    }); 
 
    $(document).mousedown(function(){ 
 
    \t $('.dropdown-menu').hide(); 
 
    }) 
 
    
 
});

источник

2016-01-21 19:45:43 saikumar

Такая же проблема https://jsfiddle.net/syp7ynqm/8/ – alfix

На самом деле не та же самая проблема, мне очень жаль. Проблема этого заключается в том, что она не закрывается, если я не щелкнул внутри ввода, а затем снова нажимаю на нее. – alfix

обновленный код сейчас – saikumar

Вместо использования ниспадающего метод переключения, чтобы показать или скрыть выпадающий список.

$(document).ready(function(){ 
$('#name').focusin(function(){ 
      $('.dropdown-menu').toggle(); 
}); 
$('#name').focusout(function(){ 
      $('.dropdown-menu').toggle(); 
}); 
});

Это приводит к раскрывающемуся списку, показывающему, когда вход сфокусирован и исчезает при нажатии.

Проверить эту скрипку: https://jsfiddle.net/e59xb38p/40/

источник

2016-01-21 19:53:21 stark

Проблема в том, что я хочу отображать сообщение, когда фокусируюсь. Посмотрите эту скрипку, как ответили saikumaru, используя переключатель. Все еще не работает. jsfiddle.net/syp7ynqm/8 Я также добавил вопрос об добавлении дополнительной информации – alfix

Итак, вы хотите отображать сообщение всякий раз, когда пользователь не фокусируется на поле #name? Попробуйте выбрать время выпадающего меню. – stark

$(document).ready(function(){ 

    var $dropDownMenu = $('.dropdown-menu'); 
    // displays as default 
    $dropDownMenu.css("display", "block"); 

    $('#name') 
    .focusin(function() { 
     $dropDownMenu.css("display", "none"); 
    }) 
    .focusout(function() { 
     $dropDownMenu.css("display", "block"); 
    }); 
});

источник

2016-01-21 19:54:26 Leonardo

Выпадающее окно Bootstrap с jquery

ответ

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