javascript - 管理小部件的可见性和不可见性

Question

我需要帮助显示/隐藏基于我点击的空间的小部件

我正在使用 datepicker bootstrap 小部件和其他一些小部件

我的代码是:

    <div class="o_datepicker">

            <t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
            <input type="text"
                t-att-name="widget.name"
                t-att-placeholder="placeholder"
                class="oe_datepicker_master oe_simple_date"/>
        <input t-att-id="widget.name" type="text"
                t-att-placeholder="placeholder"
                class="oe_hijri oe_datepicker_master"
                />
    </div>

当我点击那个 div 的任何地方时bootstrap datepicker 小部件是可见的。我只想将其限制为第一个输入，当我单击第二个输入时，小部件应该是不可见的，因为当我单击第二个输入时，会打开另一个小部件。

注意:两个输入必须在相同的<div class="o_datepicker">

谢谢

Answer 1

您必须在第二次输入点击时停止事件传播:

$(".o_datepicker input:last").click(function(event) {
    //Prevents the event from bubbling up the DOM tree, 
    //preventing any parent handlers from being notified of the event.
    event.stopPropagation();
    //Your code here.
});

希望对您有所帮助。