4

ドロップダウンメニューに日付ピッカーを追加したい。私はこのdatepickerリンクを使用します

次に、入力選択日をクリックしてもメニューが閉じないようにコードを追加しましたが、入力が消えます。どうすれば修正できますか？

$('.datepicker').datepicker({
    autoclose: true
});

$('.dropdown-toggle').dropdown();
$('.jsolr-search-result-form .dropdown input, .jsolr-search-result-form .dropdown label, .jsolr-search-result-form ul span').click(function(e) {
  e.stopPropagation();
});
4

2 に答える 2

3

次のことができます。

jQuery(function($){
    $('#dropdownMenu1').parent().on('hide.bs.dropdown', function(e){
        e.preventDefault();
    });
});

例： http： //jsfiddle.net/9qyf2/

ドロップダウンイベントは親要素でトリガーされることに注意してください。そこから、どの要素がクリックされたかを確認し、必要に応じてデフォルトの動作を防ぐことができます。jsコンポーネントのブートストラップドキュメントを確認してください：http：//getbootstrap.com/javascript/#dropdowns-usage

それが役に立てば幸い。

于 2014-07-18T11:09:59.577 に答える
1

これはとても面倒でした。また、いくつかのBootstrapドロップダウンメニュー内にいくつかの日付ピッカーがあります。私は2つの方法でこれを解決しました。

1つ目は、jQueryを使用して、DatePickerがクリックされたときにイベントが1回バブリングするのを防ぎます。

$('.yourDatePicker').on('hide', function(event) {
    event.stopPropagation();
    $(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) {
        return false;
    });
});

もう1つのより永続的な解決策は、datepicker.jsファイル自体を変更することでしたが、datepickercdnを使用しているようです。ダウンロードしてローカルで使用できる場合は、クラックして開くと、次のようなコードが見つかります。

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...

この領域に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()){

日付ピッカーは他のDOM要素への干渉を停止しますが、このソリューションはより広く普及しており、コード内の他の領域に影響を与えないことを確認するためにテストします。

于 2017-12-08T15:15:40.553 に答える