Question

我正在尝试创建一个魔术搜索栏，通过魔术，我希望它具有响应性并且非常动态。现在，我一直在试图找出如何解决JavaScript的问题。

该代码有一个主容器，其值是merge_HOO = clocked_ind pd.DataFrame(merge_HOO) print(merge_HOO) merge_HOO.to_csv('merge_HOO_test1.csv')，在内部，我们可以找到两个div，它们将在内容的左右移动。

输入（内容）和搜索按钮2使用向左定位：搜索按钮2分别为100％，200％，300％和400％。

当尺寸减小到650px时，您可以看到布局发生了变化，首先单击按钮1开始搜索过程，oveflow:hidden它将按钮向左移动-100，然后手动将input_location，input_dates和input_guests移至Button2更改left属性。

我的疑问是，一旦单击向右或向左按钮，如何更改其左值以100％递增或递减？

按钮2到达左：0位置后，向onclick右箭头可防止元素继续向左移动元素：-％？

我的插图可能会更好地解释它：)

我的代码

JSFIDDLE

HTML

display:none

CSS

<head>
    <title>GTC BAR</title>

    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="./js/searchBarScroll.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- STYLES -->
    <link rel="stylesheet" href="./css/main.css"/>

    <!-- METADATA -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

</head>

<body>

    <div class="section1">

        <!-- START MAGIC SEARCHBAR -->

        <div class="search_bar_container">

            <!-- ABSOLUTE LEFT AND RIGHT ARROWS -->

            <div class="left_arrow_icon_container">
            </div>

            <div class="right_arrow_icon_container">
            </div>

            <!-- END ABSOLUTE LEFT AND RIGHT ARROWS -->

            <button class="search_bar_button1" id="button1">LET'S SEARCH</button>

            <div class="search_bar_input input_location" id="input_location">
                <img class="search_bar_input_icon" src="./images/location_icon.svg"/>
                <input type="text" class="formInput" name="location" placeholder="Location">
            </div>

            <div class="vl"></div>

            <div class="search_bar_input input_dates" id="input_dates">
                <img class="search_bar_input_icon" src="./images/calendar_icon.svg"/>
                <input type="text" class="formInput" name="location" placeholder="Departing">
            </div>

            <div class="vl"></div>

            <div class="search_bar_input input_guests" id="input_guests">
                <img class="search_bar_input_icon" src="./images/guest_icon.svg"/>
                <input type="text" class="formInput" name="location" placeholder="Guests">
            </div>

            <button class="search_bar_button2" id="button2">SEARCH</button>

        </div>

        <!-- END MAGIC SEARCHBAR -->

    </div>

    <script>
        $('#button1').click(function(){
        $('#button1').css('left','-100%');


        $(".input_location").css('left','0');
        $(".input_dates").css('left','100%');
        $(".input_guests").css('left','200%');
        $("#button2").css('left','300%');
        });
    </script>

</body>

点击div并移动其他3个div -100％

0 个答案: