下拉菜單中的Bootstrap搜索表單

Question

我的菜單中有一個下拉菜單，但是當我單擊下拉菜單中的搜索表單字段時，該下拉菜單立即關閉。

這是我的代碼：

 <button id="sharebutton" type="button" class="btn btn-sm btn-info" data-toggle="dropdown" data-hover="dropdown"
            data-close-others="true"><i class="fa fa-search"></i> Search
    </button>

    <ul class="dropdown-menu extended notification">


        <li>
            <div class="form-group">
                <?php echo $this->Form->create('Search', array('controller' => 'searches', 'action' => 'prodsearch')); ?>


                <div class="input-group">
                    <?php echo $this->Form->input('newsearchterm', array('required' => true, 'class' => 'form-control', 'label' => false, 'placeholder' => 'Search Products...', 'name' => 'newsearchterm')); ?>
                    <span class="input-group-btn">

                                            <?php
                                            echo $this->Form->button(
                                                '<i class="fa fa-search"></i>',
                                                array(
                                                    'type' => 'submit',
                                                    'class' => 'btn blue',
                                                ),
                                                array('escape' => 'false')
                                            );
                                            ?>


                                        </span>
                </div>


            </div>

            <?php echo $this->Form->end(); ?>


        </li>


    </ul>

（我使用的是CakePHP，這就是為什么表單代碼有點有趣的原因）

Answer 1

將stopPropagation()添加到您的搜索表單字段。

jQuery('.your-form-selector').click(function (e) {
     e.stopPropagation();
});

其他一切都會按預期進行。

jQuery參考

我只是在尋找相同的東西，在這里找到了

Answer 2

刪除“ li”標簽，然后嘗試。 像這樣：

        <div class="form-group">
            <?php echo $this->Form->create('Search', array('controller' => 'searches', 'action' => 'prodsearch')); ?>


            <div class="input-group">
                <?php echo $this->Form->input('newsearchterm', array('required' => true, 'class' => 'form-control', 'label' => false, 'placeholder' => 'Search Products...', 'name' => 'newsearchterm')); ?>
                <span class="input-group-btn">

                                        <?php
                                        echo $this->Form->button(
                                            '<i class="fa fa-search"></i>',
                                            array(
                                                'type' => 'submit',
                                                'class' => 'btn blue',
                                            ),
                                            array('escape' => 'false')
                                        );
                                        ?>


                                    </span>
            </div>


        </div>

        <?php echo $this->Form->end(); ?>


   </ul>

在Bootstrap導航下拉菜單中添加表單后，這對我有用。