Question

我正在努力防止JQuery的元素推送其他元素，我希望它是浮动的，并且可以防止Bootstrap设置失调。

现在，当我开始在搜索栏中输入内容时

默认的laravel导航栏被拉伸，下面的所有内容均被推送。有什么办法可以使它浮动并阻止它推动元素？我已经尝试过将其定位为相对。

在我的控制器中：

公共函数提取（请求$ request） { // dd（$ request-> get（'query'））;

if ($request->get('query')) {
    $query = $request->get('query');
    $data = DB::table('users')->where('first_name', 'LIKE', '%' . $query . '%')->get();
    $output = '<ul class="dropdown-menu" style="display:block; position:relative">';

    if (count($data) < 1) {
        $output .= "<li><a href=''>No information matches</a></li>";
    }

    foreach ($data as $row) {
        // $strippedCountryName = strtolower(trim(preg_replace('/\s+/', '', $row->country_name)));
        $output .= "<li><a href='/member/$row->id'>" . $row->first_name . ' ' . $row->last_name . '</a></li>';
    }

    $output .= '</ul>';
    echo $output;
}

}

nav.blade.php：

    <!-- Right Side Of Navbar -->
    <ul class="navbar-nav ml-auto">
        <!-- Authentication Links -->
        @guest
            <li class="nav-item">
                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
            </li>
            @if (Route::has('register'))
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                </li>
            @endif
        @else
            <div class="form-group">
                <input type="text" name="search_name" id="search_name" class="form-control" placeholder="Find Brethren"/>
                <div id="personList"></div>
            </div>
            {{ csrf_field() }}
            <li class="nav-item dropdown">
                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                    {{ Auth::user()->name }} <span class="caret"></span>
                </a>

                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{{ route('logout') }}"
                        onclick="event.preventDefault();
                        document.getElementById('logout-form').submit();">
                        {{ __('Logout') }}
                    </a>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </div>
            </li>
        @endguest
    </ul>

我的custom.js：

<script type="text/javascript">
    $(document).ready(function() {
        $('#search_name').keyup(function() {
            var query = $(this).val();
            if(query != '') {
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('fetch') }}",
                    method: "POST",
                    data: {query: query, _token: _token},
                    success: function(data) {
                    $('#personList').fadeIn();
                        $('#personList').html(data);
                    }
                });
            } else {
                $('#personList').html('');
            }
        });

        $(document).on('click', 'li', function(){
            $('#search_name').val($(this).text());
            $('#personList').fadeOut();
        });

        $("#successMessage").delay(5000).slideUp(700);
    });

我想念这样的方式或步骤吗？

编辑：

已经尝试过根据JQuery生成的元素提供手动CSS的建议：

#personList {
    position: relative;
}

#positionList > .dropdown-menu {
    position:absolute;
}

但是仍然是同样的问题。我可以尝试任何解决方案吗？

JQuery生成的元素会推送其他元素

0 个答案: