javascript - 切换时更改填充

Question

这段代码是我写的

jQuery(function ($) {
    $('.input_search').hide();

    $(".search").click(function () {
        $(this).css("padding", "0 0 0 130px");
        $(this).css("background", "rgba(51, 51, 51, 1)");
        $(this).find("a").css("display", "none");

        $(".input_search").show();
    });
});

a {
    text-decoration: none;
    color: white;
}

li {
    list-style-type: none;
    background: rgba(51, 51, 51, 1);
	font-size: 18px;
	padding: 0 0 0 30px;
    display: table-cell;
	line-height: 55px;
	margin: 0 2px;
	padding: 0;
	vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li class="search">
        <a href="#" title="Search">Search</a>
        <input type="text" class="input_search" />
    </li>
</ul>

我想要的是当我点击 .search 时，它的填充平滑地向左移动(使用 slideToggle 而不是 click() )。我希望输入显示在左侧的 li 中。

我的代码不完整，我被困在这里。

感谢您的帮助。

Answer 1

只需将此 css 添加到您的 css 文件中即可。

.search{
transition: all 0.3s ease 0s;
}

这是 fiddle

我想这就是你想要的new fiddle