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

Answer 2

$(document).on('ready', function() {
      $('.input_search').hide();

      $(".search").on('click', function() {
          if ($(this).hasClass('open')) {
              $(this).children('a').show();
              $(this).removeClass('open');
              $(".input_search").hide();
              
            } else {
              $(this).children('a').hide();
              $(this).addClass('open');
              $(".input_search").show();
              
            }
          });

      });

a {
  text-decoration: none;
  color: white;
}

li {
  list-style-type: none;
  background: rgba(51, 51, 51, 1);
  font-size: 18px;
  display: table-cell;
  line-height: 30px;
  margin: 0 2px;
  vertical-align: middle;
}

.search {
  padding: 5px 15px;
  transition:all .4s ease-in-out;
 -webkit-transition:all .3s ease-in-out;
}

.search.open {
  padding: 5px 25px 5px 80px;
  background: rgba(51, 51, 51, 1);
}

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

切换时更改填充

2 个答案: