[英]Bootstrap - dropdown menu close on click in Datepicker
I am working with Bootstrap and date picker. 我正在使用Bootstrap和日期选择器。 I added a datepicker in boostrap dowpdown. 我在boostrap dowpdown中添加了一个日期选择器。 When selecting the date the dropdown closes automatically. 选择日期时,下拉列表会自动关闭。 Refer the image for more info: 请参阅图像以获取更多信息:
Action 1: Click the dropdown button, We see the dropdown list. 动作1:单击下拉按钮,我们将看到下拉列表。 Action 2: When clicking on the fiel. 动作2:单击字段时。 I will dynamically add datepicker. 我将动态添加datepicker。 After the action 3: When selecting on the Date. 动作3之后:选择日期时。 The Dropdown is getting close so The user is back to Action 1. 下拉列表越来越近,因此用户返回到操作1。
What i am trying to do is After the user click the Date. 我想做的是在用户单击日期之后。 The dropdown should not close. 下拉菜单不应关闭。
I am using the following code to prevent the click which workes on the table inside the dropdown but not with the date picker. 我正在使用以下代码来防止单击在下拉列表中的表格上起作用的单击,但不能单击日期选择器。
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
Can some one help me to prevent the dropdown close. 有人可以帮我防止下拉菜单关闭吗?
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span>
</a>
<ul class="dropdown-menu keep-open-on-click">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Note: The datepicker will be added dynamically when the user clicks on the table to end it the date. 注意:当用户单击表上的日期以结束日期时,将自动添加日期选择器。 So is that the problem? 那是问题吗?
This one was very troublesome. 这个很麻烦。 I also have a couple of datepickers located within some Bootstrap drop-down menus. 在某些Bootstrap下拉菜单中,我还有几个datepicker。 I solved this using two ways. 我用两种方法解决了这个问题。
The first uses jQuery to stop the event from bubbling up one time when the DatePicker is clicked 第一个使用jQuery来阻止事件在单击DatePicker时冒泡
$('.yourDatePicker').on('hide', function(event) {
event.stopPropagation();
$(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) {
return false;
});
});
The other, more permant solution was to change the datepicker.js file itself. 另一个更持久的解决方案是更改datepicker.js文件本身。 If you crack it open you will find code that looks like this 如果您将其打开,将会发现类似以下的代码
click: function(e){
e.preventDefault();
var target = $(e.target).closest('span, td, th'),
year, month, day;
if (target.length === 1){
switch (target[0].nodeName.toLowerCase()){
...ect...
If you add a e.stopPropagation() function to this area, like this 如果将e.stopPropagation()函数添加到该区域,则如下所示
click: function(e){
e.preventDefault();
e.stopPropagation(); // <-- add this
var target = $(e.target).closest('span, td, th'),
year, month, day;
if (target.length === 1){
switch (target[0].nodeName.toLowerCase()){
your datepickers will stop interfering with your other DOM elements, though this solution is more widespread, and I would test to make sure it doesn't impact other areas in your code. 您的日期选择器将停止干扰您的其他DOM元素,尽管此解决方案更为广泛,并且我将进行测试以确保它不会影响代码中的其他区域。
Your code should work BUT 您的代码应该可以,但是
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
This is looking for the class('keep-open-on') on the datepicker, not the dropdown. 这是在日期选择器上寻找类(“ keep-open-on”),而不是下拉列表。 You need to find it in the parent I believe. 您需要在我相信的父母中找到它。
$(document).on('click', '.datepicker', function(e) {
if ($(this).parents().find('keep-open-on-click')) { e.stopPropagation(); }
});
Should work. 应该管用。
Try this code, 试试这个代码,
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) {
e.hide();
}
});
If I understand your question correctly, you are trying to capture the change
event of the datepicker selection and prevent the default actions from finishing. 如果我正确理解您的问题,则您正在尝试捕获datepicker选择的change
事件并阻止完成默认操作。 Try this: 尝试这个:
$('#your-datepicker-input').datepicker({
}).on('change', function(e) {
console.log("changed");
e.preventDefault();
});
Example here: https://jsfiddle.net/shanabus/a5f82nsy/ 此处的示例: https : //jsfiddle.net/shanabus/a5f82nsy/
Update 1 更新1
Without your code for an example, I'm guessing its something like this: https://jsfiddle.net/shanabus/oghgwa5j/1/ - here we have a dropdown with a datepicker
inside of it. 如果没有您的代码作为示例,我猜它是这样的: https : datepicker
在这里,我们有一个带有datepicker
的下拉菜单。 When I add code so that clicking that table cell turns it into an input with a datepicker, it hijacks the functionality of the dropdown - probably because its a dropdown within a dropdown. 当我添加代码以便单击该表格单元格将其转换为带有日期选择器的输入时,它会劫持下拉菜单的功能-可能是因为该下拉菜单在下拉菜单中。
Perhaps you will need a better UI design to handle this type of scenario. 也许您将需要更好的UI设计来处理这种情况。 A datepicker dropdown inside of a table, inside of an accordion panel, inside of a dropdown might be as tricky to use as it is to code. 在表格内部,手风琴面板内部,下拉菜单内部的datepicker下拉菜单可能很难像在编码时那样使用。
Update 2 更新2
Here is a great answer on how to better control the dropdown in basic use cases: https://stackoverflow.com/a/19797577/88732 关于如何更好地控制基本用例中的下拉列表,这是一个很好的答案: https : //stackoverflow.com/a/19797577/88732
I could not able to solve this issue so I changed my solution from drop-down to Modal. 我无法解决此问题,因此我将解决方案从下拉菜单更改为Modal。
<div class="dropdown">
<a href="#" data-toggle="modal" data-target="#NModal"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span>
</a>
<div id="NModal" class="modal fade" role="dialog" style="min-width: 650px;">
<div class="modal-dialog">
<!-- My Code -->
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.